JQuery/JavaScript: доступ к содержимому iframe
Я хотел бы манипулировать HTML внутри iframe, используя jQuery.
Я думал, что смогу сделать это, установив контекст функции jQuery в качестве документа iframe, что-то вроде:
$(function(){ //document ready
$('some selector', frames['nameOfMyIframe'].document).doStuff()
});
Однако это не похоже на работу. Немного осмотра показывает мне, что переменные в frames['nameOfMyIframe'] являются undefined если я не буду ждать некоторое время для загрузки iframe. Однако, когда iframe загружает переменные не доступны (я получаю permission deniedошибки типа).
Кто-нибудь знает обойти это?
15 ответов
Я думаю, что то, что вы делаете, подчиняется той же политике происхождения. Это должно быть причиной, по которой вы получаете ошибки типа "отказано в разрешении".
Если <iframe> из того же домена, элементы легко доступны как
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
$(document).ready(function(){
$('#frameID').load(function(){
$('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
});
Если iframe src из другого домена, вы все равно можете это сделать. Вам нужно прочитать внешнюю страницу в PHP и отобразить ее с вашего домена. Как это:
iframe_page.php
<?php
$URL = "http://external.com"
$domain = file_get_contents($URL)
echo $domain
?>
Тогда как то так:
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>
Выше приведен пример того, как редактировать внешнюю страницу с помощью iframe без доступа и т.д.
Использование
iframe.contentWindow.document
вместо
iframe.contentDocument
Я нахожу этот способ чище:
var $iframe = $("#iframeID").contents();
$iframe.find('selector');
Вам необходимо прикрепить событие к обработчику загрузки iframe и выполнить там js, чтобы убедиться, что iframe завершил загрузку, прежде чем получить к нему доступ.
$().ready(function () {
$("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
$('some selector', frames['nameOfMyIframe'].document).doStuff();
});
};
Вышеприведенное решение решит проблему "еще не загружен", но что касается разрешений, если вы загружаете страницу в iframe, которая находится в другом домене, вы не сможете получить к ней доступ из-за ограничений безопасности.
Вы можете использовать window.postMessage для вызова функции между страницей и его iframe (кросс-домен или нет).
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>
Я предпочитаю использовать другой вариант для доступа. Из parent вы можете получить доступ к переменной в дочернем iframe.$ переменная тоже, и вы можете получить доступ к ее просто вызовуwindow.iframe_id.$
Например, window.view.$('div').hide() - скрыть все div в iframe с идентификатором 'view'
Но это не работает в FF. Для лучшей совместимости вы должны использовать
$('#iframe_id')[0].contentWindow.$
Если приведенный ниже код не работает
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
Вот надежный способ заставить его работать:
$(document).ready(function(){
setTimeout(
function () {
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
},
300
);
});
Таким образом, скрипт запустится через 300 миллисекунд, так что у него будет достаточно времени для загрузки, а затем код вступит в действие. Иногда
iFrameне загружается и скрипт пытается выполниться перед ним.
300msможно настроить на что-нибудь еще в соответствии с вашими потребностями.
Вы пробовали классический вариант, ожидая завершения загрузки, используя встроенную функцию готовности jQuery?
$(document).ready(function() {
$('some selector', frames['nameOfMyIframe'].document).doStuff()
} );
К
Я создаю пример кода. Теперь вы можете легко понять из другого домена, что вы не можете получить доступ к контенту iframe.. Тот же домен, к которому мы можем получить доступ к контенту iframe
Я поделился с вами своим кодом, пожалуйста, запустите этот код, проверьте консоль. Я печатаю изображение src на консоли. Существует четыре iframe, два iframe из одного домена и два других из другого домена (третье лицо) . Вы можете увидеть два изображения src ( 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) в консоли, а также может отображаться две ошибки разрешения ( 2 Ошибка: в доступе к свойству "доступ запрещен" '
... irstChild)}, содержимое: function (a) {return m.nodeName (a, "iframe")? a.contentDocument...
) который идет от стороннего 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>
Я остановился здесь на поиске содержимого iframe без jquery, так что для всех, кто ищет это, именно так:
document.querySelector('iframe[name=iframename]').contentDocument
Это решение работает так же, как iFrame. Я создал PHP-скрипт, который может получить все содержимое с другого сайта, и наиболее важной частью является то, что вы можете легко применить свой собственный jQuery к этому внешнему контенту. Пожалуйста, обратитесь к следующему сценарию, который может получить все содержимое с другого веб-сайта, а затем вы также можете применить свой cusom jQuery/JS. Этот контент может использоваться где угодно, внутри любого элемента или любой страницы.
<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;
}
Для еще большей надежности:
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;
}
а также
...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );
if (frame_win) {
$(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
...
}
...