如何解決操縱iframe和iframe加載的js之間的競爭條件？

我有來檢查的iframe是否加載javascript文件，如果它被加載然後一些內容附加到IFRAME如何解決操縱iframe和iframe加載的js之間的競爭條件？

body_application.js

var iframe_object = $('#embedded_document_container') 
    .load(function(){ 
    $(this).contents().find('head').append('<link type="text/css" rel="stylesheet" media="all" href="/assets/style.css"/>'); 
    });

但是我注意到，這種做法已經提到的一個問題在場景1下方。

第一種場景： 我檢查了網絡日誌，iframe首先被加載，然後腳本body_application.js修改了iframe。

在這種情況下，不追加的style.css

第二種情況： 我檢查網絡日誌，iframe中得到了不修改的iframe腳本body_application.js後加載。

在這種情況下，它確實追加的style.css

是否有其他方法可以讓我做到這一點？

來源

2015-09-23 Ajinkya Pisal

能在包括'js'哪裏'iframe'元素被加載到文檔中？ – guest271314

@Joseph如果你看到我的描述，我已經使用了該帖子中給出的答案。我的問題是在加載iframe之前或之後操作iframe加載的腳本。所以$（元素）。如果在腳本附加到文檔之前加載iframe，則load（）不起作用 –

您的代碼會導致一個所謂的race condition，其結果取決於外部因素，因爲它們會影響單個操作的速度，在這種情況下會影響子頁面的加載速度。

最簡單的辦法就是保持iframe的src財產最初是空的，然後將其設置之後將onload事件：

var iframe_object = $('#embedded_document_container') 
    .load(function(){ 
    $(this).contents().find('head').append('<link type="text/css" rel="stylesheet" media="all" href="/assets/style.css"/>'); 
    }); 
iframe_object.attr('src', 'http://www.stackoverflow.com/');

這自動確保頁面不能在事件發生前被加載已到位。

您可以使用更復雜的解決方案，比如從iframe內部廣播消息，或者檢查其負載狀態，然後有條件地設置事件，但上面的解決方案是最實用的。

來源

2015-09-23 06:02:07

是的。這似乎是一個整潔的方法。讓我看看這是否適合我。謝謝 –

謝謝。像魅力一樣工作。：D –

是的，這是一個很好的解決方案，我將在即將到來的優惠中使用它。感謝Niels在我身邊:) –

我認爲必須有一個比這更好的或先前的解決方案。但您可以按照以下步驟操作： -

當iframe加載時，您可以連續檢查'head'元素，如果發現可以做更多的事情並且清除查找間隔。

var iframe_object = $('#embedded_document_container') 
     .load(function(){ 
     var lookUp=setInterval(function(){ 
     if($(this).contents().find('head')) 
     { 
      $(this).contents().find('head').append('<link type="text/css" rel="stylesheet" media="all" href="/assets/style.css"/>'); 
      clearInterval(lookUp); 
     } 
     },500); 
     });

條件當你的JS功能加載後狀況，檢查是否IFRAME已經加載..

var iframe_object = $('#embedded_document_container') 
if(iframe_object.contents().find('body')) 
{ 
//do directly-- 
} 
else 
{ 
//bind load event -- 
iframe_object.load(function(){/*your codes*/}); 
}

來源

2015-09-23 06:02:35

現在它回答了我的問題。謝謝。我會試試 –

從技術上講，這仍然可能會導致競爭條件，因爲'iframe'將在不同的進程中加載，並且Javascript在該級別不提供序列化。我不確定如何在瀏覽器中處理加載事件的序列化。 –

試試這個：

<script type="text/javascript"> 
 
function onLoadHandler() { 
 
    alert('loaded'); 
 
} 
 
</script>

<iframe id ='myframe' src='www.mysite.com' onload="onLoadHandler();"></iframe>

來源

2015-09-23 06:09:10

如何解決操縱iframe和iframe加載的js之間的競爭條件？

回答

相關問題