Wie kann ich mit JavaScript/jQuery auf den Inhalt eines iframe zugreifen?

Question

Wie kann ich mit JavaScript/jQuery auf den Inhalt eines iframe zugreifen?

Gefragt el 13 de Dezember, 2008: Wann wurde die Frage gestellt
718398 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich möchte den HTML-Code innerhalb eines iframe mit jQuery manipulieren.

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

$(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'] sind undefined es sei denn, ich warte eine Weile, bis der iframe geladen ist. Wenn der iframe jedoch geladen wird, sind die Variablen nicht zugänglich (ich erhalte permission denied -Typ-Fehler).

Kennt jemand eine Lösung für dieses Problem?

Gefragt el 13 de Dezember, 2008 von rz.

3 Stimmen

Was enthält der iFrame - ist sein src auf einen anderen Bereich festgelegt?

Kommentiert el 14 de Dezember, 2008 von James

0 Stimmen

Wenn es sich um einen anderen Bereich handelt, gibt es dann noch eine Möglichkeit, auf dessen Inhalt zuzugreifen oder ein Ereignis zu registrieren?

Kommentiert el 1 de Oktober, 2009 von adardesign

38 Stimmen

Nein, denn das wäre ein Cross-Site-Scripting, das aus Sicherheitsgründen verboten ist. Meine Lösung war die Verwendung eines Proxys: Ich habe den HTML-Code im IFRAME wortwörtlich über meine eigene Website eingespeist, so dass er aus Sicht des Browsers nicht mehr seitenübergreifend ist.

Kommentiert el 6 de April, 2010 von reinierpost

Anzeigen 2 weitere Kommentare

Answer 1

5 Antworten

Answer 2

2voto

Zisu Punkte 487

Ich habe einen Beispielcode erstellt. Jetzt können Sie leicht verstehen, dass Sie von einer anderen Domain aus nicht auf den Auf den Inhalt des iframe kann man nicht zugreifen, auf den Inhalt des iframe kann man zugreifen.

Ich teile Ihnen meinen Code mit, bitte führen Sie diesen Code aus Prüfen Sie die Konsole. Ich drucke Bild src in der Konsole. Es gibt vier iframe, zwei iframe, die von der gleichen Domain kommen, und zwei weitere von einer anderen Domain (Drittanbieter), Sie können zwei Bild-SRC sehen ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

と

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) auf der Konsole und kann auch zwei Berechtigungsfehler sehen( 2 Fehler: Zugriffsberechtigung für die Eigenschaft 'document' verweigert

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

), die von einem Iframe eines Drittanbieters 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>

Beantwortet el 24 de September, 2015 von Zisu (487 Punkte )

Answer 3

2voto

Imran Zahoor Punkte 2155

Wenn der folgende Code nicht funktioniert

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

Hier ist der zuverlässige Weg, wie es funktioniert:

$(document).ready(function(){ 
  setTimeout(
    function () {
      $("#iFrame").contents().find("#someDiv").removeClass("hidden");
    },
    300
  );
});

Auf diese Weise wird das Skript nach 300 Milisekunden ausgeführt, so dass es genug Zeit hat für iFrame geladen werden, und dann wird der Code in Aktion treten. Zuweilen wird der iFrame wird nicht geladen und das Skript versucht, vor ihm ausgeführt zu werden. 300ms kann je nach Ihren Bedürfnissen angepasst werden.

Beantwortet el 12 de November, 2021 von Imran Zahoor (2155 Punkte )

Answer 4

1voto

Dominique Fortin Punkte 2188

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

y

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

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

Beantwortet el 31 de Oktober, 2018 von Dominique Fortin (2188 Punkte )

Answer 5

1voto

Jeff Davis Punkte 4668

Ich landete hier auf der Suche nach immer den Inhalt eines iframe ohne Jquery, so dass für alle anderen auf der Suche nach, dass, es ist nur diese:

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

Beantwortet el 31 de Dezember, 2018 von Jeff Davis (4668 Punkte )

Answer 6

1voto

Ahsan Horani Punkte 226

Diese Lösung funktioniert genauso wie iFrame. Ich habe ein PHP-Skript erstellt, das alle Inhalte von der anderen Website abrufen kann, und das Wichtigste ist, dass Sie Ihre benutzerdefinierte jQuery leicht auf diese externen Inhalte anwenden können. Bitte sehen Sie sich das folgende Skript an, das alle Inhalte von der anderen Website abrufen kann, und dann können Sie auch Ihre eigene jQuery/JS anwenden. Dieser Inhalt kann überall verwendet werden, in jedem Element oder auf jeder 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;
}

Beantwortet el 15 de Januar, 2019 von Ahsan Horani (226 Punkte )

Wie kann ich mit JavaScript/jQuery auf den Inhalt eines iframe zugreifen?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich mit JavaScript/jQuery auf den Inhalt eines iframe zugreifen?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: