Solved

What does this javascript do?

Posted on 2016-11-22
7
25 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 35

Assisted Solution

by:Kimputer
Kimputer earned 200 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 51

Accepted Solution

by:
Julian Hansen earned 300 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 35

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 51

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 51

Expert Comment

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now