Code: IFrame load JavaScript asynchronously

Chapter 9 - Advanced Web Performance Optimization

First, create a function to process the data once the iframe loads:

function mainPageFunction (data) {
    // code that uses the iFrame data
}

Next, create the iframe to load the external JavaScript file. Note that iframes can cause layout problems, so the easiest way is to use a hidden iframe, like so (some browsers don’t like positioned iframes):

<div style="position:absolute;left:0;top:0;visibility:hidden;" id="datadiv">
    <iframe height="0" width="0">
        <script src="http://www.example.com/scripts/widget.js" type="text/javascript"></script>
    </iframe>
</div>

Or you could load the data with an empty iframe, like so:

<iframe src="about:blank" height="0" width="0" name="dataframe"></iframe>
<script type="text/javascript">
    window.frames['dataframe'].window.location.replace('loadData.html');</script>

Now, once you fill up JavaScript variables with data in the iframe, you can pass them to the main HTML page using the following code:

parent.mainPageFunction (data);