Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

What does this javascript do?

Hi experts, I copied this link from the Twitter website into my code and would like to know what it does, my Twitter link still works without it.

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Open in new window

Thanks,
Col
0
colinspurs
Asked:
colinspurs
  • 3
  • 2
  • 2
2 Solutions
 
KimputerCommented:
Basically, just loads the widgets.js from the twitter servers (if main site is https:, it will get it from https://platform.twitter.com/, otherwise just http)
1
 
Julian HansenCommented:
It downloads a twitter widget.
Here is what it looks like expanded
// YOU NEED TO LOOK AT THE END OF THE FUNCTION TO SEE HOW IT IS INVOKED
// d=document, s=script AND id=twitter-wjs
!function(d,s,id){
  var js,
  
    // THIS SAYS FIND THE FIRST <SCRIPT> ELEMENT ON THE PAGE
    fjs=d.getElementsByTagName(s)[0],

    // THIS DOES A REGULAR EXPRESSION CHECK ON THE START OF THE
    // PAGE LOCATION TO SEE IF IT IS HTTP OR HTTPS
    // THIS IS DONE BECAUSE WHEN LOADING A SCRIPT TO PREVENT
    // A SAME ORIGIN ISSUE THE PROTOCOL OF THE SCRIPT SRC MUST MATCH
    // THAT OF THE PAGE.
    // P NOW HAS EITHER HTTP OR HTTPS DEPENDING ON THE PROTOCOL OF THE
    // CONTAINER PAGE
    p=/^http:/.test(d.location)?'http':'https';

    // ONLY ADD THIS IF IT DOES NOT ALREADY EXIST ON THE PAGE  
    // THE s PARAMETER IS SET TO TWITTER-WJS - WHICH IS THE ID OF THE WIDGET GETS WHEN 
    // IT IS ADDED TO THE PAGE. IF THERE IS ALREADY A ELEMENT WITH THAT id THEN SKIP THIS STEP
    if(!d.getElementById(id)){

      // CREATE A NEW <script> ELEMENT
      js=d.createElement(s);

      // SET ITS id TO twitter-wjs
      js.id=id;

      // SET THE src TO THE PROTOCOL WE WORKED OUT ABOVE
      // FOLLOWED BY THE PATH TO THE WIDGET
      js.src=p+'://platform.twitter.com/widgets.js';

      // NOW ADD THIS SCRIPT BEFORE THE FIRST <scritpt> ON 
      // THE PAGE
      fjs.parentNode.insertBefore(js,fjs);
    }
  
  // CALL THE FUNCTION WITH THESE PARAMETERS
}(document, 'script', 'twitter-wjs');

Open in new window


More information here https://dev.twitter.com/web/javascript/loading
1
 
colinspursAuthor Commented:
OK thanks, but then shouldn't it make a difference if I leave the script out?  It doesn't seem to...
<figure>
                	<a href="https://twitter.com/fobgfc" data-show-count="false" data-size="large" target="_blank" ><img src="gifs/twitter.gif" alt="Follow us on Twitter" title="Follow us on Twitter" /></a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                </figure>

Open in new window

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
KimputerCommented:
It only loads the correct code. If you didn't use the widget code somewhere else, it's useless.
You probably only wanted a link, making the widget totally unnecessary.
1
 
Julian HansenCommented:
OK thanks, but then shouldn't it make a difference if I leave the script out?
If you leave it out and your page still works then you don't need it.
1
 
colinspursAuthor Commented:
Thanks.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now