Solved

What does this javascript do?

Posted on 2016-11-22
7
92 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 56

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 56

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 56

Expert Comment

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

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Convert Silverlight ERP To Angularjs,HTML5 3 62
links not working 2 27
How to pass values to HTML-5 attribute dynamically? 24 53
Diff of the day 2 11
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…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

730 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