Question

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

在此进行测试：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个元素无法加载其他页面。在此示例中，尝试单击该iframed网页顶部的“TUTORIALS” - 它只是打开下拉菜单，而不是加载另一个页面。

我该怎么办？

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

Answer 1

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

听;在父页面上将已启动属性更改为1？

Answer 2

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

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

{s}每次更改时都会调用iframe的加载事件。

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

如何检测iframe何时开始加载其他页面？

3 个答案: