Load event triggers server side script before script has loaded

Question

I have an iframe that has a onload event. This event called a function (iframe_load) that I placed into a server side script. It appears that when my screen is launched, the onload event is triggered before the server side script has loaded and I get an error as the function is not found.

I have got around this by changing the onload event to call a checking function (iframe_check_load) in the client side script. This checks for the existence of parameter in the server side script, where if found it will then call the original function (iframe_load).

However ideally I would prefer not to have this checking function and to keep the client side code to a minimum. Is there a way I can add some code to the onload event to do this check, without having to use the checking function?

My current code:

function iframe_check_load(ctrl) {
   if(typeof iframe_flag != "undefined"){
     iframe_load();                               
   }            
}

<IFRAME id=iFrame2 onload=iframe_check_load() ></IFRAME>

I am sure there must be better ways to do all of this, please go easy as I'm still learning JS!

Answer 1

Since that there's no guarantee that the script is loaded before the frame, or vice versa, at least one checking must be performed in order to know if the external script is already available when the frame is loaded.

If the frame is loaded before the external script is available, you can use ONLOAD attribute on the element that load the external script to notify that it's already loaded. This will ensure that the iframe_load is always called. Assuming that there's no network error.

<SCRIPT>
//the saved "ctrl" parameter for iframe_load if
//the frame is loaded before custom_scripts.js.
var ctrlParam; //undefined as default

//script loaded handler for custom_scripts.js
function customScriptLoaded() {
    //call iframe_load only if ctrlParam is not undefined.
    //i.e.: frame is already loaded.
    //will do nothing otherwise. leave it to iframe_check_load.
    if (typeof ctrlParam != "undefined") {
        iframe_load(ctrlParam);
    }
}

//check whether it's safe to call iframe_load.
//assuming that "iframe_flag" is defined by custom_scripts.js.
function iframe_check_load(ctrl) {
    if (typeof iframe_flag != "undefined") {
        //custom_scripts.js already loaded.
        //call iframe_load now.
        iframe_load(ctrl);
    } else {
        //custom_scripts.js not yet loaded.
        //save parameter and defer call to iframe_load.
        //iframe_load will be called by customScriptLoaded.
        //ctrl parameter must not be undefined in order to work.
        console.log('Error: ctrl parameter of iframe_check_load is undefined. iframe_load will never be called.');
        ctrlParam = ctrl;
    }
}
</SCRIPT>

<!--Note: Don't forget to duble-quotes attribute values-->
<SCRIPT id="custom_scripts" type="text/javascript" src="htmlpathsub/custom/custom_scripts.js" UserSuppliedFullPath="1" onload="customScriptLoaded()"></SCRIPT>

<!--Using "this" (the IFRAME element) as the "ctrl" parameter-->
<IFRAME id="iFrame2" onload="iframe_check_load(this)"></IFRAME>