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

Question

I have these two scripts for creating iframe on page dynamically, but only last one works, but if I use them each on separate page both work fine.

<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>

Here is the iframe building code

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

Here I have added code for creating iframe

Nothing to detect here; looks fine to me. I would investigate both `embed.js` and `embed-search.js`. Are the files from 3rd party API? — Adam Azad, Sep 15 '16 at 10:16
@AdamAzad , js files can consider as third party but i have created both files.Both files are different and there variable to — Puneet, Sep 15 '16 at 10:21
Could you post them here, then? At least the portion creates the `iframe` — Adam Azad, Sep 15 '16 at 10:24
_“Here is the iframe building code”_ – so _both_ the embed.js and embed-search.js scripts contain this code? Then you are of course overwriting your load event handler. — CBroe, Sep 15 '16 at 11:53

score 0 · Accepted Answer · answered Sep 15 '16 at 12:24

The issue relays in overriding window.onload function definition. Use addEventListener(event, callback) instead.

Here's a simplified example reducing the same problems.

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

Working solution using 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
});

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

1 Answers1

Linked