У меня есть iframe с id = "myIframe", и вот мой код для загрузки его содержимого:
$('#myIframe').attr("src", "my_url");
Проблема в том, что иногда загрузка занимает слишком много времени, а иногда загружается очень быстро. Поэтому я должен использовать функцию "setTimeout":
setTimeout(function(){
if (//something shows iframe is loaded or has content)
{
//my code
}
else
{
$('#myIframe').attr("src",""); //stop loading content
}
},5000);
Все, что я хочу знать, это как узнать, загружен ли iFrame или в нем есть контент. Использовать iframe.contents().find()
не получится. Я не могу использовать iframe.load(function(){})
.
javascript
jquery
iframe
новичок29
источник
источник
Ответы:
Попробуй это.
<script> function checkIframeLoaded() { // Get a handle to the iframe element var iframe = document.getElementById('i_frame'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // Check if loading is complete if ( iframeDoc.readyState == 'complete' ) { //iframe.contentWindow.alert("Hello"); iframe.contentWindow.onload = function(){ alert("I am loaded"); }; // The loading is complete, call the function we want executed once the iframe is loaded afterLoading(); return; } // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds window.setTimeout(checkIframeLoaded, 100); } function afterLoading(){ alert("I am here"); } </script> <body onload="checkIframeLoaded();">
источник
setTimeout(checkIframeLoaded, 100);
readyState === "complete"
сработала, поскольку она не меняется, пока все не загрузится.iframe.contentDocument.location.href
отображением какabout:blank
. Это кажется правдой, даже еслиsrc
дляiframe
указывается непосредственно в HTML.VM29320:1 Uncaught DOMException: Blocked a frame with origin "http://localhost:9002" from accessing a cross-origin frame.
любезно используйте:
$('#myIframe').on('load', function(){ //your code (will be called once iframe is done loading) });
Обновил свой ответ по мере изменения стандартов.
источник
iframe
s обычно начинается сsrc="about:blank"
, даже еслиsrc
он указан непосредственно в HTML или до того, какiframe
узел будет добавлен в DOM. Я проверил это путем опроса дляiframe
«сcontentDocument.location.href
в тугой петлей на IE11, Chrome, и Edge. Это также не работает, если кадрируемый контент выполняет перенаправление через метатеги или javascript.У меня была такая же проблема, и я добавил к этому, мне нужно было проверить, загружается ли iframe независимо от междоменной политики. Я разрабатывал расширение Chrome, которое вводит определенный скрипт на веб-страницу и отображает некоторый контент с родительской страницы в iframe. Я попробовал следующий подход, и это сработало для меня идеально.
PS: В моем случае у меня есть контроль над контентом в iframe, но не на родительском сайте. (Iframe размещен на моем собственном сервере)
Во-первых:
создайте iframe с
data-
атрибутом в нем вроде (эта часть была во внедренном скрипте в моем случае).<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>
Теперь в коде iframe используйте:
var sourceURL = document.referrer; window.parent.postMessage('1',sourceURL);
Теперь вернемся к внедренному сценарию в моем случае:
setTimeout(function(){ var myIframe = document.getElementById('myiframe'); var isLoaded = myIframe.prop('data-isloaded'); if(isLoaded != '1') { console.log('iframe failed to load'); } else { console.log('iframe loaded'); } },3000);
и,
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons { console.log('URL issues'); return; } else { var myMsg = event.data; if(myMsg == '1'){ //8-12-18 changed from 'data-isload' to 'data-isloaded $("#myiframe").prop('data-isloaded', '1'); } } }
Возможно, это не совсем ответ на вопрос, но это действительно возможный случай этого вопроса, который я решил этим методом.
источник
Самый простой вариант:
<script type="text/javascript"> function frameload(){ alert("iframe loaded") } </script> <iframe onload="frameload()" src=...>
источник
Вы можете использовать
load
событие iframe для ответа при загрузке iframe.document.querySelector('iframe').onload = function(){ console.log('iframe loaded'); };
Это не скажет вам, загружен ли правильный контент: чтобы проверить это, вы можете проверить файл
contentDocument
.document.querySelector('iframe').onload = function(){ var iframeBody = this.contentDocument.body; console.log('iframe loaded, body is: ', body); };
источник
Я не уверен, сможете ли вы определить, загружен он или нет, но вы можете запустить событие, как только оно загрузится:
$(function(){ $('#myIframe').ready(function(){ //your code (will be called once iframe is done loading) }); });
РЕДАКТИРОВАТЬ: как указал Джесси Халлетт, это всегда срабатывает, когда
iframe
загружается, даже если он уже был. По сути, еслиiframe
уже загружен, обратный вызов будет выполнен немедленно.источник
$('#myIframe').load(function(){ })
ready
в iframe всегда немедленно выполняет функцию, так как она не поддерживается другими документами, а не фреймом, в котором запущен jQuery.в моем случае это был фрейм из разных источников, и он иногда не загружался. решение, которое сработало для меня: если он загружен успешно, то, если вы попробуете этот код:
var iframe = document.getElementsByTagName('iframe')[0]; console.log(iframe.contentDocument);
он не позволит вам получить доступ
contentDocument
и выдать ошибку перекрестного происхождения, однако, если кадр не загружен успешно, онcontentDocument
вернет#document
объектисточник
Когда iFrame загружается, он изначально содержит #document, поэтому для проверки состояния загрузки лучше всего проверить, что там сейчас.
if ($('iframe').contents().find('body').children().length > 0) { // is loaded } else { // is not loaded }
источник
У меня есть трюк, который работает следующим образом: [кроссбраузерность не тестировалась!]
Определите обработчик события onload iframe, определенный как
$('#myIframe').on('load', function() { setTimeout(function() { try { console.log($('#myIframe')[0].contentWindow.document); } catch (e) { console.log(e); if (e.message.indexOf('Blocked a frame with origin') > -1 || e.message.indexOf('from accessing a cross-origin frame.') > -1) { alert('Same origin Iframe error found!!!'); //Do fallback handling if you want here } } }, 1000); });
Заявление об ограничении ответственности: работает только с документами IFRAME с одинаковым происхождением.
источник
Действительно отличный метод - использовать jQuery AJAX. Родительский фрейм будет выглядеть так:
<iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>
Файл iframe_load.php загрузит библиотеку jQuery и JavaScript, который пытается загрузить целевой URL-адрес в AJAX GET:
var the_url_to_load = "http://www.your-website.com" ; $.ajax({ type: "GET", url: the_url_to_load, data: "", success: function(data){ // if can load inside iframe, load the URL location.href = the_url_to_load ; }, statusCode: { 500: function() { alert( 'site has errors' ) ; } }, error:function (xhr, ajaxOptions, thrownError){ // if x-frame-options, site is down or web server is down alert( 'URL did not load due to x-frame-options' ) ; } });
ВАЖНО! Место назначения должно содержать заголовок «Access-Control-Allow-Origin». Пример на PHP:
HEADER( "Access-Control-Allow-Origin: *" ) ;
источник
Если вам нужно знать, когда iframe готов к манипулированию, используйте интервал. В этом случае я «пинг» Контент каждые 250 мс , и если есть какой - либо контент внутри целевого фрейма, остановить «пинг» и сделать что - то.
var checkIframeLoadedInterval = setInterval( checkIframeLoaded, 250 ); function checkIframeLoaded() { var iframe_content = $('iframe').contents(); if (iframe_content.length > 0) { clearInterval(checkIframeLoadedInterval); //Apply styles to the button setTimeout(function () { //Do something inside the iframe iframe_content.find("body .whatever").css("background-color", "red"); }, 100); //100 ms of grace time } }
источник
Если вы размещаете страницу и iframe на одном домене, вы можете прослушивать
Window.DOMContentLoaded
событие iframe . Вам нужно дождаться, пока сработает исходная страницаDOMContentLoaded
, а затем прикрепитьDOMContentLoaded
прослушиватель событий к iframeWindow
.Учитывая, что у вас есть iframe следующим образом,
<iframe id="iframe-id" name="iframe-name" src="..."></iframe>
следующий фрагмент позволит вам подключиться к
DOMContentLoaded
событию iframe :document.addEventListener('DOMContentLoaded', function () { var iframeWindow = frames['iframe-name']; // var iframeWindow = document.querySelector('#iframe-id').contentWindow // var iframeWindow = document.getElementById('iframe-id').contentWindow iframeWindow.addEventListener('DOMContentLoaded', function () { console.log('iframe DOM is loaded!'); }); });
источник