兩個Javascript無法創建兩個iframe，只有最後一個javascript創建iframe

Question

我有這兩個腳本動態地在頁面上創建iframe，但只有最後一個工作，但如果我在單獨的頁面上使用它們都工作正常。

<script id='vr_NTgtLxxx'> 
window.options = { 
    api_key: 'NTgtLxxx', 
    height: '100%', 
    width: '100%', 
    min_height: '1000px' 
}; 
var s = document.createElement('script'); 
s.src = "http://www.example.com/embed.js"; 
s.async = true; 
document.body.appendChild(s); 
</script> 


<script id='vr_My0tNxxx'> 
window.options_search = { 
    api_key_search: 'My0tNxxx', 
    height: '100%', 
    width: '100%', 
    min_height: '1000px', 
    'title': 'search' 
}; 
var sa = document.createElement('script'); 
sa.src = "http://www.example.com/embed-search.js"; 
sa.async = true; 
document.body.appendChild(sa); 
</script> 

這裏是iframe的建築規範

window.onload=function(){ 
     var container_s=document.createElement("div"); 
      container_s.setAttribute("id", "div_"); 

     var span_s =document.createElement("span_s"); 
      span_s.setAttribute("id", "span_s_"); 
      span_s.style.fontFamily="arial"; 
      span_s.style.fontWeight="bold"; 
      span_s.style.textAlign="center"; 
      span_s.style.display ="Block"; 

     var loader_message_s = document.createTextNode("...."); 
      span_s.appendChild(loader_message_s); 
      container_s.appendChild(span_s); 

     var ifrm_s = document.createElement("iframe"); 
     ifrm_s.setAttribute("src","SRC_URL"); 
     ifrm_s.style.width = "100%"; 
     ifrm_s.style.minHeight = "1000px"; 
     ifrm_s.frameBorder=0; 
     if(window.options_search.width){ 
      ifrm_s.style.width = window.options_search.width; 
     } 
     ifrm_s.style.height = "100%"; 
     if(window.options_search.height){ 
      ifrm_s.style.height = window.options_search.height; 
     } 
     if(window.options_search.min_height){ 
      ifrm_s.style.minHeight = window.options_search.height; 
     } 

     if(window.options_search.border){ 
      ifrm_s.style.border = window.options_search.border; 
     }   
     ifrm_s.setAttribute("id", key_search_s); 
     ifrm_s.setAttribute("onload", 'frameload_s("span_s_'+key_search_s+'")'); 
     container_s.appendChild(ifrm_s); 
     var s_s = document.getElementById("vr_"+key_search_s); 
     s_s.parentNode.insertBefore(container_s, s_s); 
} 

在這裏，我添加的代碼爲壓倒一切的window.onload功能定義創建的iframe

Answer 1

問題繼電器。改爲使用addEventListener(event, callback)。

下面是一個簡化的例子，可以減少同樣的問題。

window.onload = function(){ 
 
    console.log('Window loaded #1'); // Will not excecute 
 
} 
 
window.onload = function(){ 
 
    console.log('Window loaded #2'); // Window loaded #2 
 
}

工作使用addEventListener

window.addEventListener('load', function(){ 
 
    console.log('Window loaded #1'); // Window loaded #1 
 
}); 
 
window.addEventListener('load', function(){ 
 
    console.log('Window loaded #2'); // Window loaded #2 
 
});