Run Script Before Iframe Loads

I'm working with a help system which is embedded in an application. The important part of the help tries to have the same document.domain value, but the child iframe seems to run i

Solution 1:

One thing that you can do is set the source of the iFrame after the script loads.

So, create a function that will load the script on page load, and then once the scrip is completed you can set a callback function which will execute after your script is done loading.

function loadScript( url, callback ) {
  var script = document.createElement( "script" )
  script.type = "text/javascript";
  if(script.readyState) {  //IE
    script.onreadystatechange = function() {
      if ( script.readyState === "loaded" || script.readyState === "complete" ) {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName( "head" )[0].appendChild( script );
}


// call the function...
loadScript('change-document-domain.js', function() {
  //executes after the script is laoded.
  document.getElementById("myFrame").src = "sourceOfIFrame.html"
});

Solution 2:

Not sure about whether you want this kind of solution or not. But using javascript or jquery for this purpose might be a workaround.

<iframe id="frame" src="">
</iframe>

And you just trigger the iFrame load after the parent content javascript is loaded ...

 $("#frame").prop("src", "http://iframe-url.com/");

Solution 3:

try creating a separate page containing the content for the iframe and like to it, which could be slightly slower, but would load in order.