wake-up-neo.com

jQuery/JavaScript: Zugriff auf den Inhalt eines Iframes

Ich möchte den HTML-Code in einem Iframe mit jQuery bearbeiten.

Ich dachte, ich wäre dazu in der Lage, indem ich den Kontext der jQuery-Funktion als Dokument des iframe festlegte.

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

Dies scheint jedoch nicht zu funktionieren. Ein wenig Inspektion zeigt mir, dass die Variablen in frames['nameOfMyIframe']undefined sind, es sei denn, ich warte eine Weile, bis der iframe geladen ist. Wenn jedoch der iframe geladen wird, sind die Variablen nicht verfügbar (ich erhalte permission denied- Fehler).

Kennt jemand eine Problemumgehung?

javascriptjqueryiframesame-origin-policy
742
rz.

Ich denke, was Sie tun, unterliegt der gleichen Origin-Richtlinie . Dies sollte der Grund sein, warum Sie Berechtigungsverweigerungstyp-Fehler erhalten.

362
Onur Bebin

Wenn der <iframe> aus derselben Domäne stammt, sind die Elemente leicht als zugänglich

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

Referenz

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

Wenn das iframe src aus einer anderen Domäne stammt, können Sie es trotzdem tun. Sie müssen die externe Seite in PHP lesen und von Ihrer Domäne aus wiederholen. So was:

iframe_page.php

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

    $domain = file_get_contents($URL)

    echo $domain
?>

Dann so etwas wie:

display_page.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 Sie eine externe Seite über einen iframe bearbeiten, ohne dass der Zugriff verweigert wird.

41
basysmith

Benutzen

iframe.contentWindow.document

anstatt

iframe.contentDocument
30
user

Ich finde diesen Weg sauberer:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');
29
zupa

Sie müssen ein Ereignis an den Onload-Handler eines Iframes anhängen und die Js dort ausführen, sodass Sie sicherstellen können, 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 Obige löst das Problem "Noch nicht geladen". Wenn Sie jedoch eine Seite in den iframe laden, die sich in einer anderen Domäne befindet, können Sie aufgrund von Berechtigungen aufgrund von Sicherheitsbeschränkungen nicht darauf zugreifen.

25
Andreas Grech

Mit window.postMessage können Sie eine Funktion zwischen Seite und seinem Iframe aufrufen (domänenübergreifend oder nicht).

Dokumentation

page.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>
19
B.Asselin

Ich bevorzuge eine andere Variante für den Zugriff. Vom übergeordneten Element aus können Sie auf die Variable im untergeordneten Iframe zugreifen. $ ist ebenfalls eine Variable und Sie können Zugriff auf ihren einfachen Aufruf window.iframe_id.$ erhalten.

Zum Beispiel window.view.$('div').hide() - verstecke alle divs in iframe mit der ID 'view'

Aber es funktioniert nicht in FF. Für eine bessere Kompatibilität sollten Sie verwenden

$('#iframe_id')[0].contentWindow.$

4
Evgeny Karpov

Ich erstelle einen Beispielcode. Jetzt können Sie von verschiedenen Domänen aus leicht verstehen, dass Sie nicht auf Inhalte von iframe zugreifen können. Dieselbe Domäne können wir auf iframe-Inhalte zugreifen

Ich teile Ihnen meinen Code mit. Bitte führen Sie diesen Code aus und überprüfen Sie die Konsole. Ich drucke Bild src an der Konsole. Es gibt vier iFrames, zwei iFrames, die von derselben Domain stammen, und zwei von einer anderen Domain (von einem Drittanbieter). Sie können zwei Bild-src ( https://www.google.com/logos/doodles/2015/googles) anzeigen -neues-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 anzeigen (2 Fehler: Zugriff auf Eigenschaft 'Dokument' verweigert

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

), der von einem Drittanbieter iFrame stammt.

<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>
2
Zisu

Haben Sie den Klassiker ausprobiert und darauf gewartet, dass der Ladevorgang mit der in Ready bereitgestellten jQuery-Funktion abgeschlossen wird?

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

K

2
Khb

Für noch mehr Robustheit:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

und 

...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );

if (frame_win) {
  $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
  ...
}
...
0
Dominique Fortin

Ich bin hier auf der Suche nach dem Inhalt eines Iframes ohne Jquery gelandet.

document.querySelector('iframe[name=iframename]').contentDocument
0
Jeff Davis

Diese Lösung funktioniert genauso wie iFrame. Ich habe ein PHP -Skript erstellt, mit dem alle Inhalte von der anderen Website abgerufen werden können. Der wichtigste Teil ist, dass Sie Ihre benutzerdefinierte jQuery problemlos auf diesen externen Inhalt anwenden können. Bitte beachten Sie das folgende Skript, das alle Inhalte von der anderen Website abrufen kann. Anschließend können Sie auch Ihr jQuery/JS verwenden. Dieser Inhalt kann überall, innerhalb eines beliebigen Elements oder einer beliebigen Seite verwendet werden.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}
0
Ahsan Horani