[英]How to detect when iframe starts loading another page?
我正在嘗試在同源iframe中隱藏元素。 但是，這個被騙子的兒子在隱藏之前會閃爍幾毫秒。 因此，我所做的就是添加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="iframeID" height="800px" width="800px" src="https://www.w3schools.com/" ></iframe>
<script>
</script>
</body>
</html>
然而，也有一些a不加載其他頁面元素。 在此示例中，請嘗試單擊該iframed網頁頂部的“ TUTORIALS”，它只會打開下拉菜單，而不加載其他頁面。
我該怎么辦？
我注意到“ TUTORIALS”鏈接具有href="javascript:void(0)" 。 也許我應該以某種方式選擇所有a環節沒有這樣的href？ 但是不確定這是否是傻瓜。
$(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？
您可以像這樣在iframe上使用load事件，
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
每次更改src時，也會調用iframe的load事件。
我通過制作2個iframe並顯示第2個iframe（正在加載第1個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何時開始加載以及何時完成加載
[英]How do I detect when an iframe starts loading and when it finishes loading
如何檢查網站何時在另一個特定網站上加載（使用 iframe）
[英]How to check when the website is loading on the another specific site (using iframe)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.