jQuery / JavaScript: Zugriff auf Inhalte eines iframe

StackOverflow https://stackoverflow.com/questions/364952

Frage

Ich möchte die HTML in einem Iframe mit jQuery manipulieren.

Ich dachte, ich wäre in der Lage, dies zu tun, indem sie den Kontext der jQuery-Funktion Setzen Sie das Dokument des iframe zu sein, so etwas wie: 

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

Doch das scheint nicht zu funktionieren. Ein bisschen Inspektion zeigt mir, dass die Variablen in frames['nameOfMyIframe'] sind undefined, wenn ich eine Weile für die iframe warten zu laden. Wenn jedoch die iframe die Variablen lädt nicht zugänglich sind (ich permission denied-Typ-Fehler).

Kennt jemand eine Behelfslösung dazu?

War es hilfreich?

Lösung

Ich denke, was Sie tun Same Origin Policy unterliegt. Dies sollte der Grund sein, warum Sie bekommen Erlaubnis verweigert Typ Fehler.

Andere Tipps

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

Wenn die iframe src aus einer anderen Domäne ist, können Sie es immer noch tun. Sie benötigen die externe Seite in PHP zu lesen und Echo aus Ihrer Domäne. Wie folgt aus:

iframe_page.php 

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

    $domain = file_get_contents($URL)

    echo $domain
?>

Dann etwas wie folgt aus:

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>

Der obige ist ein Beispiel dafür, wie eine externe Seite über einen iframe zu bearbeiten, ohne dass der Zugriff verweigert etc ...

Ich finde diese Art und Weise sauberer: 

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

Mit 

iframe.contentWindow.document

statt 

iframe.contentDocument

Sie müssen ein Ereignis in einem iframe der onload-Handler befestigen, und die js dort ausführen, so dass Sie die iframe stellen Sie sicher, vollständig geladen ist, bevor sie zugreifen. 

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

Das oben lösen das ‚noch nicht geladen‘ Problem, sondern als die Berechtigungen angeht, wenn Sie eine Seite in dem iframe laden, die aus einer anderen Domäne ist, werden Sie nicht in der Lage sein, darauf zuzugreifen aufgrund Sicherheitseinschränkungen.

Sie können window.postMessage verwenden, um eine Funktion zwischen Seite aufrufen und seine iframe (Cross-Domain oder nicht).

Dokumentation

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>

Ich ziehe andere Variante zu verwenden, für den Zugriff. Von Eltern können Sie einen Zugriff auf Variable in Kind iframe haben. $ ist eine Variable zu, und Sie können den Zugriff auf seinen gerade Anruf erhalten window.iframe_id.$

Zum Beispiel window.view.$('div').hide() - blenden Sie alle divs in iframe mit id 'view'

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

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

Haben Sie die klassische versucht, für die Last wartet jQuery gebautet bereit Funktion abzuschließen mit? 

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

K

Ich erstelle einen Beispielcode. Jetzt können Sie leicht von anderen Domain verstehen Sie nicht zugreifen können Inhalt der iframe .. Same Domäne können wir iframe-Inhalte zugreifen

ich Ihnen meinen Code teilen, führen Sie diesen Code überprüfen Sie die Konsole. Ich drucke Bild src auf Konsole. Es gibt vier iframe, zwei iframe aus derselben Domäne kommen und anderen beiden von anderen Domain (Dritter) .Sie können sehen zwei Bild 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 Konsole und kann auch zwei Berechtigungsfehler (siehe 2 Fehler: Zugriff verweigert Eigenschaft zuzugreifen ‚Dokument‘

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

), die von Dritter 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>

ich hier gelandet suchen immer den Inhalt eines iframe ohne jquery, so dass für alle anderen dafür suchen, es ist dies nur: 

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

Diese Lösung funktioniert gleich wie iFrame. Ich habe ein PHP-Skript erstellt, das alle Inhalte von der anderen Website zu bekommen, und wichtigste Teil ist, dass Sie einfach Ihre benutzerdefinierte jQuery auf diese fremden Inhalte auch anwenden können. Bitte beachten Sie die folgenden Skript, das alle Inhalte von der anderen Website bekommen und dann können Sie Ihre cusom jQuery / JS als auch anzuwenden. Dieser Inhalt kann überall eingesetzt werden, innerhalb jedes Element oder jede Seite. 

<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;
}

Für eine noch größere 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();
  ...
}
...
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top