jQuery/JavaScript: mengakses isi dari iframe

Saya ingin memanipulasi HTML di dalam iframe using jQuery.

Saya pikir saya'a dapat melakukan hal ini dengan menetapkan konteks fungsi jQuery untuk menjadi dokumen iframe, seperti:

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

Namun ini doesn't tampaknya bekerja. Sedikit pemeriksaan menunjukkan bahwa variabel-variabel dalam frame['nameOfMyIframe'] adalah undefined kecuali aku menunggu beberapa saat untuk iframe untuk memuat. Namun, ketika iframe beban variabel-variabel yang tidak dapat diakses (saya mendapatkan permission denied-jenis kesalahan).

Tidak ada yang tahu pekerjaan-sekitar ini?

Mengomentari pertanyaan (5)

Jika <iframe> dari domain yang sama, unsur-unsur yang dengan mudah dapat diakses sebagai

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

Referensi

Komentar (11)
Larutan

Saya pikir apa yang anda lakukan adalah tunduk pada asal yang sama kebijakan. Ini harus menjadi alasan mengapa anda mendapatkan izin ditolak jenis kesalahan.

Komentar (6)

Anda bisa menggunakan .isi() metode jQuery.

.isi() metode ini juga dapat digunakan untuk mendapatkan konten dokumen iframe, jika iframe pada domain yang sama dengan halaman utama.

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

Jika iframe src adalah dari domain lain, anda masih bisa melakukannya. Anda perlu membaca halaman eksternal ke PHP dan echo dari domain anda. Seperti ini:

iframe_page.php

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

    $domain = file_get_contents($URL)

    echo $domain
?>

Kemudian sesuatu seperti ini:

display_page.html



  Test

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





Di atas adalah contoh bagaimana untuk mengedit halaman eksternal melalui iframe tanpa akses ditolak dll...

Komentar (13)

Saya menemukan cara ini cleaner:

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

Gunakan

iframe.contentWindow.document

bukan

iframe.contentDocument
Komentar (7)

Anda perlu untuk melampirkan sebuah acara untuk iframe's onload handler, dan mengeksekusi js di sana, sehingga anda pastikan iframe telah selesai loading sebelum mengakses itu.

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

Di atas akan memecahkan 'yang belum dimuat' masalah, tapi mengenai izin, jika anda adalah loading halaman dalam iframe yang dari domain yang berbeda, anda memenangkan't dapat mengaksesnya karena pembatasan keamanan.

Komentar (6)

Anda dapat menggunakan jendela.postMessage untuk memanggil fungsi antara halaman dan iframe (cross domain atau tidak).

Dokumentasi

page.html




    Page with an iframe
    <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>


    <h1>Page with an iframe</h1>


iframe.html




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


    <h1>iframe</h1>
    <p>It's the iframe.</p>

Komentar (0)

Saya lebih suka menggunakan varian lain untuk mengakses. Dari orang tua anda dapat memiliki akses ke variabel dalam anak iframe. $ adalah variabel juga dan anda dapat menerima akses ke hanya panggilan jendela.iframe_id.$

Misalnya, jendela.lihat.$(&#39;div&#39;).hide() - menyembunyikan semua divs di iframe dengan id 'lihat'

Tapi, itu doesn't bekerja di FF. Untuk kompatibilitas yang lebih baik anda harus menggunakan

$(&#39;#iframe_id&#39;)[0].contentWindow.$

Komentar (0)

Apakah anda mencoba klasik, menunggu beban untuk menyelesaikan dengan menggunakan jQuery's builtin siap fungsi?

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

K

Komentar (1)

Saya membuat contoh kode . Sekarang anda dapat dengan mudah memahami dari domain yang berbeda anda dapat't access isi dari iframe .. domain yang Sama kita dapat mengakses konten iframe

Saya berbagi kode saya , Silakan jalankan kode ini cek konsol . Saya mencetak gambar src di konsol. Ada empat iframe , dua iframe yang berasal dari domain yang sama & dua lainnya dari domain lain(pihak ketiga) .Anda dapat melihat dua gambar src( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

dan

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) di konsol dan juga dapat melihat dua izin kesalahan( Dua Error: akses ditolak untuk mengakses properti 'dokumen'

...irstChild)},isi:fungsi(dan){kembali m.nodeName(a,"iframe")?a.contentDocument...

) yang berasal dari pihak ketiga iframe.


<p>iframe from same domain</p>



<p>iframe from same domain</p>



<p>iframe from different  domain</p>




<p>iframe from different  domain</p>




<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>
Komentar (0)

Saya berakhir di sini mencari untuk mendapatkan isi dari iframe tanpa jquery, jadi untuk orang lain mencari untuk itu, itu hanya ini:

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

Solusi ini bekerja sama dengan iFrame. Saya telah menciptakan sebuah script PHP yang bisa mendapatkan semua isi dari website lain, dan yang paling penting adalah anda dapat dengan mudah menerapkan jQuery kustom untuk konten eksternal. Silakan lihat berikut script yang bisa mendapatkan semua isi dari website lain dan kemudian anda dapat menerapkan cusom jQuery/JS juga. Konten ini dapat digunakan di mana saja, dalam setiap elemen atau setiap halaman.

<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;
}
Komentar (0)

Untuk lebih robustness:

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

dan

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

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