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

Two Javascript unable to create two iframes , only last javascript creating iframe

本文关键字：iframe 两个 Javascript 创建 最后一个      更新时间：2023-09-26

我有这两个脚本动态创建页面上的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);
}
这里我添加了创建iframe的代码

问题在于重写window.onload函数定义。使用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
});

相关文章：