Multiple JavaScript Onloads

Question

I am not a JS expert so any help on this would be appreciated. I have the below script that needs to run on the page, the first is a fix to prevent a white flash when the next iframes are loaded. The last portion of the script will load an iframe depending on css media screen (different size iframe for different view ports). Problem is that both, when combined, use an onload function and because there are two, only the last one is being applied and thus renders the first onload useless.

Any ideas on how I can get both of these to work?

The code:

<script type="text/javascript">
// Prevent variables from being global      
(function () {

var div = document.createElement('div'),
    ref = document.getElementsByTagName('base')[0] || 
          document.getElementsByTagName('script')[0];

div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

ref.parentNode.insertBefore(div, ref);

window.onload = function() {
    div.parentNode.removeChild(div);
}

})();
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"></iframe>"

var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"

var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\">    </iframe>"

var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\">    </iframe>"

}
</script>

Thanks,

B

Answer 1

You can call it all in one function, like this:

<script type="text/javascript">
// Prevent variables from being global      
(function () {

    var div = document.createElement('div'),
        ref = document.getElementsByTagName('base')[0] || 
              document.getElementsByTagName('script')[0];

    div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

    ref.parentNode.insertBefore(div, ref);

    window.onload = function() {
        div.parentNode.removeChild(div);

        var el1=document.getElementById("frameContainer");
        el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"></iframe>";

        var el2=document.getElementById("frameContainer_medium");
        el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>";

        var el3=document.getElementById("frameContainer_small");
        el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\">    </iframe>";

        var el4=document.getElementById("frameContainer_very_small");
        el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\">    </iframe>";
    };
})();
</script>

By the way, you are missing some ";".