如何检测iframe何时开始加载另一个页面？ [英] How to detect when iframe starts loading another page?
问题描述
我正在尝试隐藏同源iframe中的元素。然而，这个bi * ch的儿子在隐藏之前会闪烁几毫秒。所以我所做的是添加 display：none 并在加载iframe后将其删除 - 很棒。但是现在，当用户点击iframe的内页链接时，它还包含要隐藏的元素，它仍然会闪烁（因为现在删除了 display：none ）。我需要检测何时再次添加它，我。即就在另一个页面开始加载之前。
在此测试： 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 =iframeIDheight =800pxwidth =800pxsrc =https://www.w3schools.com/>< / iframe>
< script>
< / script>
< / body>
< / html>
但是，有一些 a 元素不要加载其他页面。在此示例中，尝试单击该iframed网页顶部的TUTORIALS - 它只是打开下拉列表，而不是加载另一页。
我该怎么办？ / p>
我注意到TUTORIALS链接有 href =javascript：void（0）。也许我应该以某种方式选择没有这样的href的所有 a 链接？但不确定它是否是万无一失的。
我通过制作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'）内容（）找到（ '一个[HREF = JavaScript的：无效（0）！]'）。。过滤（ '一个[！目标= _空白]'）滤波器（'一[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 =iframeID1height =800pxwidth =800pxsrc =https://www.w3schools.com/class =js>< / iframe>
< iframe id =iframeID2height =800pxwidth =800pxsrc =https://www.w3schools.com/class =js unclickable>< / iframe>
< script>
< / script>
< / body>
< / html>
I'm trying to hide an element in same-origin iframe. However, this son of a bi*ch blinks for a few ms before getting hidden. So what I did was added display: none and remove it after iframe is loaded - great. But now, when user clicks inner page link of iframe, which also contains element to be hidden, it still blinks (because display:none is now removed). I need to detect when to add it again, i. e. just before another page starts to load.
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
Here is what I tried:
<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>
However, there are some a elements that don't load another page. In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page.
What should I do?
I noticed that "TUTORIALS" link has href="javascript:void(0)". Maybe I should be somehow selecting all a links without such href? But not sure if it's fool proof.
I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. While 1st one is loading, it's also hidden, becomes unhidden after it finishes loading. Anyway, here is my code, should help someone:
<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何时开始加载另一个页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
