jQuery / Javascript: l'accesso ai contenuti di un iframe

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

Domanda

Vorrei manipolare il codice HTML all'interno di un iframe utilizzando jQuery.

Ho pensato che sarei in grado di fare questo impostando il contesto della funzione di jQuery per essere il documento del iframe, qualcosa come: 

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

Tuttavia questo non sembra funzionare. Un po 'di ispezione mi mostra che le variabili in frames['nameOfMyIframe'] sono undefined a meno che io aspettare un po' per l'iframe per caricare. Tuttavia, quando l'iframe carica le variabili non sono accessibili (I get permission denied - errori di tipo).

Qualcuno sa di un work-around a questo?

È stato utile?

Soluzione

Credo che quello che stai facendo è soggetto alla stessa politica di origine . Questo dovrebbe essere il motivo per cui si stanno ottenendo il permesso negato tipo errori.

Altri suggerimenti

Se il <iframe> è dallo stesso dominio, gli elementi sono facilmente accessibili come 

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

Riferimento 

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

Se lo src iframe proviene da un altro dominio si può ancora fare di esso. Hai bisogno di leggere la pagina esterna in PHP e echo dal vostro dominio. In questo modo:

iframe_page.php 

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

    $domain = file_get_contents($URL)

    echo $domain
?>

Poi qualcosa di simile:

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>

È possibile che questo è un esempio di come modificare una pagina esterna tramite un iframe senza l'accesso negato ecc ...

Trovo questo pulitore modo: 

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

Usa 

iframe.contentWindow.document

anziché 

iframe.contentDocument

È necessario collegare un evento per gestore onload di un iframe, ed eseguire i js in là, in modo da assicurarsi che l'iframe ha terminato il caricamento prima di accedervi. 

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

È possibile che questo risolverà il problema 'non-ancora-caricati', ma per quanto riguarda i permessi, se si carica una pagina nel iframe che proviene da un dominio diverso, non sarà in grado di accedere a causa di restrizioni di sicurezza.

È possibile utilizzare window.postMessage per chiamare una funzione fra le pagine e il suo iframe (dominio croce o no).

Documentazione

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>

Io preferisco usare altra variante per l'accesso. Da genitore si può avere un accesso a variabile iframe bambino. $ è una variabile troppo e si può ricevere l'accesso al suo solo chiamata window.iframe_id.$

Per esempio, window.view.$('div').hide() - nascondere tutti i div in iframe con id 'vista'

Ma, non funziona in FF. Per una migliore compatibilità si dovrebbe usare

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

Hai provato il classico, in attesa che il carico di completare utilizzando la funzione pronta built-in di jQuery? 

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

K

creo un codice di esempio. Ora si può facilmente capire dal dominio diverso non è possibile accedere contenuto del iframe .. Same dominio possiamo accedere ai contenuti iframe

Condivido il mio codice, Si prega di eseguire questo codice controllare la console. Ho stampare un'immagine src alle console. Ci sono quattro iframe, due iframe venendo dalla stesso dominio e altre due da un altro dominio (terza parte) .È possibile vedere due src immagine ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

e

https: // www. google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif  )  a console e anche in grado di vedere due errore di autorizzazione ( 2 Errore: Autorizzazione negata per accedere alla proprietà 'documento'

... irstChild)}, il contenuto:? La funzione (a) {return m.nodeName (a, "iframe") a.contentDocument ...

), che proviene da iframe di terze parti. 

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

Ho finito qui in cerca di ottenere il contenuto di un iframe senza jQuery, quindi per chiunque altro alla ricerca di quella, è proprio questa: 

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

Questa soluzione funziona stessa di iFrame. Ho creato uno script PHP che può ottenere tutti i contenuti dal sito web di altri, e la parte più importante è che si può facilmente applicare la vostra abitudine jQuery per tali contenuti esterni. Si prega di fare riferimento al seguente script che può ottenere tutti i contenuti dal sito web di altri e quindi è possibile applicare il vostro cusom jQuery / JS pure. Questo contenuto può essere utilizzato ovunque, all'interno di qualsiasi elemento o qualsiasi pagina. 

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

Per una maggiore robustezza: 

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

e 

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

if (frame_win) {
  $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
  ...
}
...
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top