如何检测 iframe 何时开始加载另一个页面？答案

【问题标题】：How to detect when iframe starts loading another page?如何检测 iframe 何时开始加载另一个页面？
【发布时间】：2017-05-06 15:11:45
【问题描述】：

我正在尝试在同源 iframe 中隐藏一个元素。然而，这个混蛋在被隐藏之前会眨眼几毫秒。所以我所做的是添加 display: none 并在 iframe 加载后将其删除 - 很棒。但是现在，当用户单击 iframe 的内页链接时，它也包含要隐藏的元素，它仍然闪烁（因为 display:none 现在已删除）。我需要检测何时再次添加它，我。 e.就在另一个页面开始加载之前。

在这里测试：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script

这是我尝试过的：

<html class="js">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
html.js #iframeID
{
    display: none;
}
</style>

<script>
$(document).ready(function()
{
    $('#iframeID').on('load', function()
    {
        $('#iframeID').contents().find('a').on('click', function()
        {
            $('html').addClass('js');
            console.log('click');
        });
        console.log('loaded');
        $('#iframeID').contents().find('#mySidenav').remove();
        $('html').removeClass('js');


    });

});
</script>
</head>

<body>
<iframe id="iframeID" height="800px" width="800px"  src="https://www.w3schools.com/" ></iframe>
<script>

</script>
</body>

</html>

但是，有些a 元素不会加载其他页面。在这个例子中，尝试点击 iframe 网页顶部的“TUTORIALS” - 它只是打开下拉菜单，而不是加载另一个页面。

我该怎么办？

我注意到“TUTORIALS”链接有href="javascript:void(0)"。也许我应该以某种方式选择没有此类href的所有a链接？但不确定它是否是万无一失的。

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

您可以像这样在iframe 上使用load 事件，

$('iframe').on('load', function(){
    console.log('Iframe Loaded');
});

iframe 的 load 事件也会在每次 src 更改时被调用。

【讨论】：

不，这会在 iframe 加载后调用，在它开始加载之前我需要一个...
@Gintas_ 你如何更改iframe 的内容。是不是通过点击。如果是，请发布相关代码。
嗯，iframed 网页包含指向其他页面的简单 a href 链接

【解决方案2】：

$(document).ready(function(){
    $('.iFrame_class').load(function(){
        console.log('frame loaded');
    });
});

或者在开始加载解决方案：

iframe 的自定义属性：

iframe class="iFrame" src="some site" started="0"

将此代码放入 iframed 页面：

  window.parent.$('.iFrame').attr("started","0"); //makes iframe started attr to false on page load
  $(document.body).on("click","a", function() {
     window.parent.$('.iFrame').attr("started","1");// makes iframe started attr to true for all clicked links
  });

然后听；父页面的started属性改成1了吗？

【讨论】：

不，这会在 iframe 加载后调用，在它开始加载之前我需要一个...

【解决方案3】：

我通过制作 2 个 iframe 并在第一个正在加载时显示第二个来修复该死的闪烁。当第一个正在加载时，它也是隐藏的，在完成加载后变得不隐藏。无论如何，这是我的代码，应该对某人有所帮助：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
iframe.js
{
    display: none;
}
iframe.unclickable
{
    pointer-events: none;
}
</style>

<script>
$(document).ready(function()
{
    $('#iframeID1').on('load', function()
    {
    $('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
        {
            $('#iframeID1').addClass('js');
            $('#iframeID2').removeClass('js');
        });
        $('#iframeID1').contents().find('#mySidenav').remove();
        $('#iframeID1').removeClass('js');
        $('#iframeID2').addClass('js');
        $('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());

    });


});
</script>
</head>

<body>
<iframe id="iframeID1" height="800px" width="800px"  src="https://www.w3schools.com/" class="js"></iframe>
<iframe id="iframeID2" height="800px" width="800px" src="https://www.w3schools.com/" class="js unclickable" ></iframe>
<script>

</script>
</body>

</html>

【讨论】：