两个Javascript无法创建两个iframe，只有最后一个javascript创建iframe

本文介绍了两个Javascript无法创建两个iframe，只有最后一个javascript创建iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个用于在页面上动态创建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>

  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）; 
}

这里我添加了创建iframe的代码

解决方案

该问题继承于重载 window.onload 函数定义。改为使用 addEventListener（event，callback）。

下面是一个简化的例子，它可以减少同样的问题。

$ b

window.onload = function（）{console.log（'Window loaded＃1'）; //不会执行} 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}）;

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