javascript - read - jquery select element in iframe




jQuery/JavaScript: Zugriff auf den Inhalt eines Iframes (8)

Ich möchte das HTML innerhalb eines Iframe mit jQuery manipulieren.

Ich dachte, dass ich in der Lage wäre, dies zu tun, indem ich den Kontext der jQuery-Funktion als Dokument des iFrames festlegen würde.

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

Dies scheint jedoch nicht zu funktionieren. Ein bisschen Inspektion zeigt mir, dass die Variablen in frames['nameOfMyIframe'] undefined sei denn, ich warte eine Weile, bis der Iframe geladen ist. Wenn das Iframe jedoch geladen wird, sind die Variablen nicht zugänglich (ich bekomme die permission denied - Typfehler).

Kennt jemand eine Umgehung dazu?


Benutzen

iframe.contentWindow.document

Anstatt von

iframe.contentDocument

Haben Sie den Klassiker ausprobiert und darauf gewartet, dass der Ladevorgang mit der eingebauten Bereitschaftsfunktion von jQuery abgeschlossen wird?

$(document).ready(function() {
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
} );

K


Ich denke, was Sie tun, unterliegt der gleichen Herkunftspolitik . Dies sollte der Grund sein, warum Sie Typfehler für die Berechtigung verweigert bekommen.


Ich erstelle einen Beispielcode. Jetzt können Sie leicht von einer anderen Domain verstehen, dass Sie nicht auf den Inhalt von iframe zugreifen können. Die gleiche Domain kann auf iframe-Inhalte zugreifen

Ich teile Ihnen meinen Code, Bitte führen Sie diesen Code überprüfen Sie die Konsole. Ich drucke Bild src an der Konsole. Es gibt vier Iframes, zwei Iframes, die von der gleichen Domain kommen und zwei andere von einer anderen Domain (Drittanbieter). Sie können zwei Image src ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

und

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) an der Konsole und kann auch zwei Berechtigungsfehler sehen (2 Fehler: Berechtigung verweigert, um auf das Dokument der Eigenschaft zuzugreifen "

... irstChild)}, Inhalt: Funktion (a) {return m.nodeName (a, "iframe")? a.contentDocument ...

) die von Drittanbieter-iframe kommt.

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
  <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe.html" name="imgbox" class="iView">

</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe2.html" name="imgbox" class="iView1">

</iframe>
<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">

</iframe>

<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">

</iframe>

<script type='text/javascript'>


$(document).ready(function(){
    setTimeout(function(){


        var src = $('.iView').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 2000);


    setTimeout(function(){


        var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);


    setTimeout(function(){


        var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);

         setTimeout(function(){


        var src = $('.iView3').contents().find("img").attr('src');
    console.log(src);
         }, 3000);


    })


</script>
</body>

Sie können window.postMessage verwenden, um eine Funktion zwischen der Seite und ihrem iframe (domänenübergreifend oder nicht) aufzurufen.

Documentation

Seite.html

<!DOCTYPE html>
<html>
<head>
    <title>Page with an iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'page',
        variable:'This is the page.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    function iframeReady(iframe) {
        if(iframe.contentWindow.postMessage) {
            iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
        }
    }
    </script>
</head>
<body>
    <h1>Page with an iframe</h1>
    <iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

Sie müssen ein Ereignis an den Onload-Handler eines Iframes anhängen und die js dort ausführen, damit Sie sicherstellen, dass der Iframe vollständig geladen ist, bevor Sie darauf zugreifen.

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

Das oben genannte löst das Problem "noch nicht geladen". Wenn Sie jedoch eine Seite im Iframe einer anderen Domäne laden, können Sie aufgrund von Sicherheitseinschränkungen nicht darauf zugreifen.


Wenn der Iframe-Quellcode aus einer anderen Domäne stammt, können Sie dies weiterhin tun. Sie müssen die externe Seite in PHP lesen und sie von Ihrer Domain aus wiedergeben. So was:

iframe_page.php

<?php
    $URL = "http://external.com"

    $domain = file_get_contents($URL)

    echo $domain
?>

Dann etwas wie das:

display_seite.html

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>

Das obige Beispiel zeigt, wie eine externe Seite über einen Iframe bearbeitet wird, ohne dass der Zugriff verweigert wird usw.


$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});




same-origin-policy