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?
Jika <iframe>
dari domain yang sama, unsur-unsur yang dengan mudah dapat diakses sebagai
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
Saya pikir apa yang anda lakukan adalah tunduk pada asal yang sama kebijakan. Ini harus menjadi alasan mengapa anda mendapatkan izin ditolak jenis kesalahan.
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 <body>! Yay!!!');
});
});
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:
<?php
$URL = "http://external.com"
$domain = file_get_contents($URL)
echo $domain
?>
Kemudian sesuatu seperti ini:
<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>
Di atas adalah contoh bagaimana untuk mengedit halaman eksternal melalui iframe tanpa akses ditolak dll...
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.
Anda dapat menggunakan jendela.postMessage untuk memanggil fungsi antara halaman dan iframe (cross domain atau tidak).
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>
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.$('div').hide()
- menyembunyikan semua divs di iframe dengan id 'lihat'
Tapi, itu doesn't bekerja di FF. Untuk kompatibilitas yang lebih baik anda harus menggunakan
$('#iframe_id')[0].contentWindow.$
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.
<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>
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;
}
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();
...
}
...