如何检查 iframe 是否已加载或是否有内容？

【问题标题】：How to check if iframe is loaded or it has a content?如何检查 iframe 是否已加载或是否有内容？
【发布时间】：2012-03-04 05:09:36
【问题描述】：

我有一个 id = "myIframe" 的 iframe，这里是我的代码来加载它的内容：

$('#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


【解决方案1】：

试试这个。

<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() 的缺点。传递函数引用更简洁：setTimeout(checkIframeLoaded, 100);
  • 这会导致“不安全的 JavaScript 尝试从具有 url2 的框架访问具有 URL url1 的框架，域、协议和端口必须匹配。”
  • 这是我想要完成的最佳解决方案。我在 iFrame 中使用 AngularJS，并使用 ng-include，这会延迟包含文件的加载。我试图在 onload 事件时打印 iframe 的内容，但它触发得太快了。检查readyState === "complete" 就行了，因为它在所有内容加载完毕之前都不会改变。
  • 我不得不说这也是唯一对我有用的解决方案。你不能相信 iframe 上的 load 事件，因为它在大多数情况下会在 IE11、Chrome 和 Edge 上立即触发，iframe.contentDocument.location.href 显示为about:blank。即使在 HTML 中直接指定了 iframe 的 src，这似乎也是正确的。
  • 如果 iframe 来自另一个域，这将不起作用：VM29320:1 Uncaught DOMException: Blocked a frame with origin "http://localhost:9002" from accessing a cross-origin frame.
【解决方案2】：

请使用：

$('#myIframe').on('load', function(){
    //your code (will be called once iframe is done loading)
});

随着标准的变化更新了我的答案。

【讨论】：

  • 这种方法根本不起作用，因为事件会立即触发，因为iframes 通常以src="about:blank" 开头，即使src 直接在 HTML 中指定或在@987654325 之前指定@node 被添加到 DOM 中。我通过在 IE11、Chrome 和 Edge 上的紧密循环中轮询 iframe 的 contentDocument.location.href 来测试这一点。如果被框起来的内容确实通过元标记或 javascript 重定向，它也不起作用。
【解决方案3】：

我有同样的问题并添加到此，我需要检查 iframe 是否已加载，而与跨域策略无关。我正在开发一个 chrome 扩展，它在网页上注入某些脚本并在 iframe 中显示来自父页面的一些内容。我尝试了以下方法，这对我来说非常有效。
P.S.：就我而言，我确实可以控制 iframe 中的内容，但不能控制父网站上的内容。 （iframe 托管在我自己的服务器上）

首先：
创建一个带有 data- 属性的 iframe（在我的例子中，这部分是在注入脚本中）
&lt;iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"&gt;&lt;/iframe&gt;

现在在 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');
        }
    }           
}



它可能不能完全回答这个问题，但它确实是我通过这种方法解决的这个问题的一个可能案例。

【讨论】：

  • 您的代码中有一些错误，例如 document.getElement->s
  • @JohnK 感谢您指出这一点，我已经解决了。很高兴知道这对您有用。
【解决方案4】：

最简单的选择：

<script type="text/javascript">
  function frameload(){
   alert("iframe loaded")
  }
</script>

<iframe onload="frameload()" src=...>

【讨论】：

  • 不是一个可靠的解决方案，因为即使 URL 已损坏，它也会发出警报。
【解决方案5】：

您可以使用 iframe 的 load 事件在 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);
};

如果 iframe src 指向与您的代码运行所在不同的域，则检查 contentDocument 将不起作用。

【讨论】：

  • 请考虑编辑您的帖子，以添加更多关于您的代码的作用以及它为何能解决问题的说明。一个大部分只包含代码的答案（即使它正在工作）通常不会帮助 OP 理解他们的问题。
【解决方案6】：

在我的情况下，它是一个跨域框架，有时不会加载。 对我有用的解决方案是： 如果它已成功加载，那么如果您尝试此代码：

var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);

它不允许您访问 contentDocument 并引发跨域错误 但是如果没有成功加载框架，那么contentDocument 将返回一个#document 对象

【讨论】：

    【解决方案7】：

    我不确定您是否可以检测到它是否已加载，但您可以在加载完成后触发事件：

    $(function(){
    $('#myIframe').ready(function(){
        //your code (will be called once iframe is done loading)
    });
});

    编辑：正如 Jesse Hallett 所指出的，当 iframe 加载时，它总是会触发，即使它已经加载了。所以本质上，如果iframe 已经加载，回调将立即执行。

    【讨论】：

    • 这个方法的好处是，即使在 iframe 完全加载后绑定它，jQuery 'ready' 事件也会触发。因此，这是检查 iframe 是否已有内容或在获得内容时通知您的好方法。
    • 这似乎只为 iframe 触发一次。但是，如果您的 iframe 中包含可能导致重新加载 iframe 中的内容的链接，则此事件将不会再次触发。如果这是您的情况，请使用@pratikabu 的答案 - $('#myIframe').load(function(){ })
    • @skimberk1 嗨，根据这个answer，您的解决方案将不起作用，因为 jquery 拥有一个变量来记住 DOM 是否已加载，并且仅检查当前帧的当前 DOM 而不是当前帧的 DOM iframe。
    • 是的，您可以在准备就绪后触发事件、显示视频、播放音乐，非常有用......
    • 根据这张票：dev.jquery.com/ticket/5511 在 iframe 上使用 ready 将始终立即执行该功能，因为它不支持其他文档，然后是运行 jQuery 的框架。
    【解决方案8】：

    当 iFrame 加载时，它最初包含 #document，因此检查加载状态可能最好通过检查现在存在的内容来工作..

    if ($('iframe').contents().find('body').children().length > 0) {
    // is loaded
} else {
    // is not loaded
}

    【讨论】：

    • 如果它在不同的域上会失败
    • 这是不正确的，因为 iframe 可能处于加载过程中（未完全加载）。
    【解决方案9】：

    我有一个技巧如下： [尚未测试跨浏览器！]

    定义 iframe 的 onload 事件处理程序定义为

    $('#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);

});

    免责声明：它仅适用于 SAME ORIGIN IFRAME 文档。

    【讨论】：

      【解决方案10】：

      如果您需要知道 iframe 何时准备好操作，请使用间隔。在这种情况下，我每 250 毫秒“ping”一次内容，如果目标 iframe 中有 any 内容，请停止“ping”并做一些事情。

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

      【讨论】：

        【解决方案11】：

        一个非常棒的方法是使用 jQuery AJAX。父框架如下所示：

        <iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>

        iframe_load.php 文件将加载 jQuery 库和尝试在 AJAX GET 中加载目标 URL 的 JavaScript：

        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: *" ) ;

        【讨论】：

          【解决方案12】：

          如果您将页面和 iframe 托管在 同一域 上，则可以侦听 iframe 的 Window.DOMContentLoaded 事件。您必须先等待原始页面触发DOMContentLoaded，然后在iframe 的Window 上附加DOMContentLoaded 事件侦听器。

          假设您有如下 iframe，

          <iframe id="iframe-id" name="iframe-name" src="..."></iframe>

          下一个 sn-p 将允许您挂钩 iframe 的 DOMContentLoaded 事件：

          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!');
    });
});

          【讨论】：

            【解决方案13】：

            你可以这样做：

            const $iframe = document.querySelector(`iframe`);

$iframe.addEventListener("load", function () {
    console.log("loaded");
});

            【讨论】：

              猜你喜欢
              • 2021-08-08
              • 1970-01-01
              • 2012-01-07
              • 2013-02-22
              • 2013-04-16
              • 2011-05-31
              • 2014-11-29
              • 2011-03-06
              • 1970-01-01
              相关资源
              最近更新 更多
              热门标签
              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode