Question

除了execute a javascript after page load is complete这个主题之外，我还注意到该解决方案不适用于加载地图。我确实有一个类似的用例。但是，如果我遵循该脚本，则不会加载所需的脚本。

我想在页面加载完成后加载地图，但是我确实在页面源代码中看到了脚本，但是没有脚本被执行。

来源是：

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);
}

在页面源中，我看到：

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);
}

有人可以向我指出如何执行脚本的方向吗？我还假设脚本应该附加到“ body”而不是“ head” m，但是我不确定。谢谢！

基于头部到身体的编辑更改：

<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>

Answer 1

因此，最终我设法解决了问题，并在浏览器中获得了所需的地图...使用以下HTML + JS代码（可以使用下面的按钮运行）：

<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>

两点注意：

您应该将创建的script标签添加为页面body的标签的子元素（我使用<div id="mapContent"/>和getElementById来访问该标签）
您应该通过http:// URL而不是通过file://来加载HTML页面：使用后者，您会收到诸如“浏览器不支持嵌入式对象”之类的错误消息< / em>

希望这可以帮助您解决实际问题！

Answer 2

有许多方法可以在页面加载后调用函数。

大多数情况下，我选择的香草js工具是：

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

这种方式比onload方法更可取，因为否则，当DOM完全加载时，您将无法附加多个事件。

Answer 3

尝试一下：

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

Answer 4

使用以下代码包装您的JavaScript代码：

if(document.readyState === 'complete') {
// good to go! Put your code here.}

页面加载后从myshiptracking加载地图

4 个答案: