?
Solved

What does this javascript do?

Posted on 2016-11-22
7
Medium Priority
?
166 Views
Last Modified: 2016-11-22
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
Comment
Question by:colinspurs
  • 3
  • 2
  • 2
7 Comments
 
LVL 37

Assisted Solution

by:Kimputer
Kimputer earned 800 total points
ID: 41897614
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
 
LVL 61

Accepted Solution

by:
Julian Hansen earned 1200 total points
ID: 41897619
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
 
LVL 3

Author Comment

by:colinspurs
ID: 41897695
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 37

Expert Comment

by:Kimputer
ID: 41897703
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 41897710
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
 
LVL 3

Author Closing Comment

by:colinspurs
ID: 41897856
Thanks.
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 41897902
You are welcome.
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question