Load external javascript when button is clicked

Question

As a start, Javascript is way out of my comfort zone. On my website I want to show a map, however the load time is pretty high and contains a lot of requests. So in order to for come a long page load, why not let the user click a button and than load the javascript. One restriction, the map should be displayed in a specific row and column.

What I have so far, the area and a button:

<div class="row">
   <div class="col-4">
       <input type="button" class="button-class" onclick="myFunc(this)">
           <script type="text/javascript">
             var width='100%';   // the width of the embedded map in pixels or percentage 
              var height='300';   // the height of the embedded map in pixels or percentage 
              var border='1'; // the width of the border around the map (zero means no border) 
              var shownames='true';   // to display ship names on the map (true or false) 
              var latitude='51.7143'; // the latitude of the center of the map, in decimal degrees 
              var longitude='04.0889';    // the longitude of the center of the map, in decimal degrees 
              var zoom='11';  // the zoom level of the map (values between 2 and 17) 
              var maptype='0';    // use 0 for Normal Map, 1 for Satellite, 2 for OpenStreetMap 
              var trackvessel='' //244770624';     MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option 
              var fleet='';   // the registered email address of a user-defined fleet (user's default fleet is used) 
              // Read more at http://www.marinetraffic.com/en/p/embed-map#6YXCVvOUaBxYHgoT.99
              function myFunc(e) {
                  if ("https:" == document.location.protocol) {
                      /* secure */
                      var src = (typeof localembed != 'undefined') ? 'https://marinetraffic.local/' : 'https://www.marinetraffic.com/';
                  } else {
                      /* unsecure */
                      var src = (typeof localembed != 'undefined') ? 'http://marinetraffic.local/' : 'http://www.marinetraffic.com/';
                  }

                if ((window.latitude === undefined) && (window.longitude === undefined) && ( (window.fleet !== undefined && window.fleet != "") || (window.fleet_id !== undefined && window.fleet_id != ""))) {
                  window.latitude = 0;
                  window.longitude = 0;
                }

                if (typeof window.mtembedcode != "undefined") {
                  var overridenLatLon = '';
                  if(window.latitude !== undefined && window.latitude != ''  && window.longitude !== undefined && window.longitude != ''){
                    if(window.zoom === undefined){
                      window.zoom = 3;
                    }
                    overridenLatLon = '/zoom:' + ((window.zoom === undefined) ? '' : zoom) + '/centery:' + ((window.latitude === undefined) ? '' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '' : longitude);
                  }
                  document.write(
                    '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/customembed' + overridenLatLon + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + ((window.trackimo !== undefined) ? '/trackimo:' + window.trackimo : '') + '/mtembedcode:'  + window.mtembedcode + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>\n'
                  );
                } else {
                  document.write(
                    '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/embed' + '/zoom:' + ((window.zoom === undefined) ? '3' : zoom) + '/centery:' + ((window.latitude === undefined) ? '36' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '23' : longitude) + '/maptype:' + ((window.maptype === undefined) ? '4' : maptype) + '/shownames:' + ((window.shownames === undefined) ? 'false' : shownames) + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + '/shipid:' + ((window.trackshipid === undefined) ? '0' : trackshipid) + '/fleet:' + ((window.fleet === undefined) ? '' : fleet) + '/fleet_id:' + ((window.fleet_id === undefined) ? '' : fleet_id) + '/vtypes:' + ((window.vtypes === undefined) ? '' : vtypes) + '/showmenu:' + ((window.showmenu === undefined) ? '' : showmenu) + '/remember:' + ((window.remember === undefined) ? 'false' : remember) + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>\n'
                  );
                }
              }
              // src="{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js";
            //window.onload = init();
          </script>
   </div>
</div>

This will open the map in the same window without leaving the website as is.

For the expert probably pretty simple to solve.... Someone willing to help me out?

Victor Thomas Wilcox Jr. · Accepted Answer · 2018-11-22 17:58:50Z

If you are going to be changing your scripts around, I'd suggest organizing your scripts into files outside of your html and investigating using prototypes. I load almost 100 different html, js, and css fragments so have some utilities that do most of the legwork for me. That said, if you are just wanting to do a simple script add, you can do it like this:

Inside your button click event handler do the following.

with jQuery: (recommended unless project is quite simple)

var script = document.createElement('script');
script.src = '{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';
script.type = 'text/javascript';
$('head')[0].appendChild(script);

without jQuery:

var script = document.createElement('script');
script.src = '{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

The script will be added and executed. If this your own script file, an alternative would be to just wrap the code in a function and only call that function during the button click handler.

rlemon · Accepted Answer · 2018-11-22 18:12:27Z

1

this function loads external script, just add this to your condition

function loadScript(url, callback) {
            var script = document.createElement("script")
            script.type = "text/javascript";
            if (script.readyState) {  //IE
                script.onreadystatechange = function () {
                    if (script.readyState == "loaded" ||
                            script.readyState == "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {
                script.onload = function () {
                    callback();
                };
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }

here is use example

loadScript("[SCRIPT_URL]", function () { 
    //do something after script loads
});

edited Nov 22, 2018 at 18:12

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

answered Nov 22, 2018 at 17:55

Demian Bibiano

3571 silver badge10 bronze badges

2 Comments

rlemon Over a year ago

Please always link back to the source, or mention the attribution when using code from others.

Demian Bibiano Over a year ago

@rlemon sorry, i will add on next time, thanks for add

Collectives™ on Stack Overflow

Load external javascript when button is clicked

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related