Indirect way to insert javascript into an html page

Question

I encountered the following script in a webpage source :

<script type="text/javascript">
  WebFontConfig = {"typekit":{"id":"cmr1bul"}};
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
    })();
</script>

From what I see, this script inserts the content of https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js before the first script in the page. What is the difference between the above and putting

<script type="text/javascript" src="https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js"> </script>

as the first script in the page ? What is gained by using the longer version ?

Matías Fidemraizer · Accepted Answer · 2016-03-04 07:29:43Z

2

It's absolutely equivalent to the following code if both script elements are added before any other one:

<script>WebFontConfig = {"typekit":{"id":"cmr1bul"}};</script>
<script src="https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js" async></script>

...or:

<script src="https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js" async></script>
<script>WebFontConfig = {"typekit":{"id":"cmr1bul"}};</script>

...because the script is asynchronously included...

edited Mar 4, 2016 at 7:29

answered Mar 4, 2016 at 7:25

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matías Fidemraizer Over a year ago

@RokoC.Buljan That's why I'm telling the OP that's just before adding them before. Am I mistaken? :D

Ewan Delanoy Over a year ago

Got it : the advantage of the longer version is that it may be put anywhere in the page, it will always result in the webfont.js being put first.

Matías Fidemraizer Over a year ago

@EwanDelanoy Yeah... BTW unless the script must be really added this way, I suggest you to use script elements..

Collectives™ on Stack Overflow

Indirect way to insert javascript into an html page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related