如何检测iframe何时开始加载其他页面？
[英]How to detect when iframe starts loading another page?
问题描述
I'm trying to hide an element in same-origin iframe. 
我正在尝试在同源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. 因此，我所做的就是添加display: none ，并在加载iframe后将其删除-太好了。 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). 但是现在，当用户单击iframe的内部页面链接（其中也包含要隐藏的元素）时，它仍然闪烁（因为display:none现在已被删除）。 I need to detect when to add it again, ie just before another page starts to load. 我需要检测何时再次添加它，即在另一页开始加载之前。
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script 在此处进行测试： 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. 然而，也有一些a不加载其他页面元素。 In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page. 在此示例中，请尝试单击该iframed网页顶部的“ TUTORIALS”，它只会打开下拉菜单，而不加载其他页面。
What should I do? 我该怎么办？
I noticed that "TUTORIALS" link has href="javascript:void(0)" . 我注意到“ TUTORIALS”链接具有href="javascript:void(0)" 。 Maybe I should be somehow selecting all a links without such href? 也许我应该以某种方式选择所有a环节没有这样的href？ But not sure if it's fool proof. 但是不确定这是否是傻瓜。
3 个解决方案
解决方案1
0 2017-05-06 15:45:21
$(document).ready(function(){
$('.iFrame_class').load(function(){
console.log('frame loaded');
});
});
Alternatively on start load solution: 或者在启动负载解决方案上：
Custom attribute for iframe: iframe的自定义属性：
iframe class="iFrame" src="some site" started="0"
Put this code to iframed page: 将此代码放入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
});
And listen; 听着 is started attribute changed to 1 on parent page? 父页面上的“开始”属性更改为1？
解决方案2
0 2017-05-06 15:45:40
You can make use of load event on the iframe as such, 您可以像这样在iframe上使用load事件，
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
The iframe 's load event is also called every time it's src changes. 每次更改src时，也会调用iframe的load事件。
解决方案3
0 2017-05-06 16:31:28
I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. 我通过制作2个iframe并显示第2个iframe（正在加载第1个iframe）来修复该死的眨眼。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.