How to include a javascript file after another loads?

Question

I have an iframe with id="iframe" Inside my footer of index.php, I want to include a javascript file after the iframe loads.

So far I have:

<script>
$('#iframe').onload = function () {
    </script>
        <script src="/js/myjsfile.js"></script>
    <script>
}
</script>

However, the webpage is getting angry and saying: SyntaxError: Unexpected end of input (for the {) and SyntaxError: Unexpected token } How can I include these files after load of another?

Include the file where? In main page or in iframe? – charlietfl Jul 28 '17 at 17:00 — charlietfl, Jul 28 '17 at 17:00

score 1 · Answer 1 · answered Jul 28 '17 at 16:59

1

You should try this :

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);

See this post for more information.

Hope this will help !

answered Jul 28 '17 at 16:59

Vianney Ain

11
1

How would I append this if I'm trying to do this inside of the footer.php file? – George Chen Jul 28 '17 at 17:05
It works the same, no matter if the script is inside the header.php or the footer.php. If you put this into jQuery('#iframe').ready tag, script will be loaded after your iframe will be ready too. – Vianney Ain Jul 28 '17 at 17:08

gaetanoM · Answer 2 · 2017-07-28T18:08:09.537

You can use jQuery.getScript() and detect the load event for the iframe.

$('#iframe').on('load', function(e) {
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js', function() {
        // library is loaded. Now I can start to use.;
        console.log('Now the library is loaded!');
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<iframe id="iframe" src="https://dummyimage.com/200x200/000/fff" style="width: 200px;height: 200px"></iframe>

A different approach can be based on adding the script element dynamically like in:

$('#iframe').on('load', function(e) {
  $('head').append($('<script/>', {src: 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js'}));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<iframe id="iframe" src="https://dummyimage.com/600x400/000/fff" style="width: 200px;height: 200px"></iframe>

@GeorgeChen Answer updated. You can create the script element on the fly and append it to the header section of your html. Thanks — gaetanoM, Jul 28 '17 at 17:16

Truextacy · Answer 3 · 2017-07-28T17:13:37.570

-1

You can inject a script tag on iframe load like this.

        <script>
         $('#iframe').on('load', function() {
             var script = document.createElement('script');
             script.src = '/js/myjsfile.js';
             document.body.appendChild(script);
         });
        </script>

edited Jul 28 '17 at 17:13

answered Jul 28 '17 at 16:59

Truextacy

562
1
5
26

`$('#iframe').onload` is invalid – charlietfl Jul 28 '17 at 17:01
My bad, copied his from up above, I fixed it. – Truextacy Jul 28 '17 at 17:03

How to include a javascript file after another loads?

3 Answers3