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

【问题标题】：Two Javascript unable to create two iframes , only last javascript creating iframe两个 Javascript 无法创建两个 iframe，只有最后一个 javascript 创建 iframe
【发布时间】：2016-09-15 20:24:05
【问题描述】：

我有这两个脚本用于在页面上动态创建 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 的代码

【问题讨论】：

这里没有检测到；对我来说看起来不错。我会调查embed.js 和embed-search.js。文件是否来自 3rd 方 API？
@AdamAzad ，js文件可以被认为是第三方，但我已经创建了两个文件。两个文件都不同，并且有变量
你能把它们贴在这里吗？至少该部分创建iframe
@AdamAzad 我已经更新了问题，请检查代码
“这是 iframe 构建代码” - 所以 embed.js 和 embed-search.js 脚本都包含此代码？那么你当然会覆盖你的加载事件处理程序。

标签： javascript html iframe

【解决方案1】：

问题在覆盖 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
});

【讨论】：