0

In addition to this topic execute a javascript after page load is complete I noticed the solution didn't work for loading a map. I do have a similar use case. However, if I follow the script the script needed doesn't load.

I want to load a map after the loading of the page is finished, however I do see the script in the page source, but no script is executed.

The source is:

var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("head")[0].appendChild(element);
}

In the page source I see:

var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("head")[0].appendChild(element);
}

Can someone please point me in the direction on how to get the script executed? I also assumed that the script should be appended to the 'body' instead of the 'head'm but I'm not sure about it. Thanks!

Edit based change of head to body:

<script>
     var mst_width="96%";var mst_height="350vh";var mst_border="0";var mst_map_style="simple";var mst_mmsi="244770624";var mst_show_track="true";var mst_show_info="true";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
    window.onload = function() {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("body")[0].appendChild(element );
      }
 </script>
Pietro Martinelli
  • 1,480
  • 11
  • 13
user2037412
  • 142
  • 11
  • 1
    are you sure you are not getting any script errors? the user’s browser might be stopping the script from executing in order to prevent an attack called cross-site request forgery – Krzysztof Krzeszewski Feb 22 '19 at 10:17
  • What kind of thing is your map? Are we talking about an image, an iFrame or what? Apart from formatting, the two code snippets you've shown appear to be identical... My first step would be to check what actually happens with that last line - does it run? Is `element` undefined? does `getElementsByTagName` match anything or not? – Mike Brockington Feb 22 '19 at 10:20
  • I tried your code and I got an error in from the `widgetApi` script... your `onload` function seems to be executed completely and without errors, but the evaluation of the external script raises an error... `Uncaught TypeError: Cannot read property 'parentNode' of null at widgetApi.js:32 at widgetApi.js:33` – Pietro Martinelli Feb 22 '19 at 10:21
  • Adding `element.setAttribute("id", "myshiptrackingscript");` after `createElement` seems to solve the `parentNode` error, but the map is not loaded (without errors in console)... – Pietro Martinelli Feb 22 '19 at 10:24
  • The `iframe` the external library adds can't added to `head` node... I changed your code to `document.getElementsByTagName("body")[0].appendChild(element );` (adding the `script` tag to `body`, not to `head`) and I get the map `iframe` in my page. The map is not visible but you can investigate further about this... – Pietro Martinelli Feb 22 '19 at 10:27
  • @PietroMartinelli changed it accordingly your suggestion, but no luck. Made the change to the OP. – user2037412 Feb 22 '19 at 10:50

4 Answers4

1

So, finally I managed to solve the problem and got the desired map in my browser... using the following HTML+JS code (which you can run with the button below):

<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
var mst_width="100%";var mst_height="450px";var mst_border="0";var mst_map_style="terrain";var mst_mmsi="";var mst_show_track="";var mst_show_info="";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
   
   function loadMap() {
  var element = document.createElement("script");
  element.setAttribute("id", "myshiptrackingscript");
  element.setAttribute("async", "");
  element.setAttribute("defer", "");
  element.src = "http://www.myshiptracking.com/js/widgetApi.js";
  document.getElementById("mapContent").appendChild(element );
   }      
       window.onload = loadMap
     console.log('Registered onload')
</script>
</head><body>
 <div id="mapContent" />
</body></html>

Two points of attention:

  1. you should add the created script tag as child of a tag belonging to the body ot the page (I used <div id="mapContent"/> and getElementById to access it)
  2. you should load the HTML page through a http:// URL, not through a a file:// one: with the latter you get an error with message like "Browser does not support embedded objects"

I hope this can help you to solve the problem in you real case!

Pietro Martinelli
  • 1,480
  • 11
  • 13
  • Thanks. I'm working on localhost at the moment, maybe because of that I don't see the map. I do see the log-message. On other thing, on the map you should see tons of icons showing a ship movements ;) – user2037412 Feb 22 '19 at 11:22
  • You can usr something like node package named http-server in order to simulate server serving avoiding file serving issues... – Pietro Martinelli Feb 22 '19 at 11:35
  • Gave it a try on my development environment (https webserver) and the script loaded with icons :) The var's prior to function don't seems to be used (you should see a picture of a schip), but see if I can fix that later. (XML Parsing Error: no root element found Location: https://www.myshiptracking.com/requests/fleet/get_fleets.php?extra=0 Line Number 1, Column 1:) – user2037412 Feb 22 '19 at 11:50
  • Though on most pages of the site it works, however on the article pages it doesn't, f.i. [link](https://uisge-beatha.eu/2018/10/Blauwe-romp-schilderen) In the console log it says 'MyShipTracking loaded', but it doesn't show up. Any thoughts how this can be solved? Thanks in advance! – user2037412 May 06 '19 at 14:29
0

There are many ways to invoke your function when the page has loaded.

My vanilla's js tool of choice most of the time is:

    window.addEventListener('DOMContentLoaded', function(){
      //your bindings and functions
    }

That way of proceeding is preferred to your onload method as otherwise, you won't be able to attach multiple events when the DOM loads completely.

Mel Macaluso
  • 1,334
  • 1
  • 9
  • 22
0

Try this:

window.onload=function(){
  document.write('<script src="http://www.myshiptracking.com/js/widgetApi.js> 
  </script>');
}
akshay karande
  • 106
  • 5
0

wrap your javascript code with this:

if(document.readyState === 'complete') {
// good to go! Put your code here.}
Ayoub Benayache
  • 1,161
  • 8
  • 23