Javascript 页面加载后从myshiptracking加载映射

除此之外，我注意到该解决方案不适用于加载地图。我有一个类似的用例。但是，如果我遵循脚本，则不会加载所需的脚本

我想在页面加载完成后加载一个映射，但是我确实在页面源代码中看到了脚本，但是没有执行任何脚本

资料来源是：

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”，但我不确定。 谢谢

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

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

var mst_width=“96%”；var mst_高度=“350vh”；var mst_border=“0”；var mst_map_style=“简单”；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=函数（）{
var元素=document.createElement（“脚本”）；
element.src=”http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName（“正文”）[0].appendChild（元素）；
}

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

我的vanilla的js工具大多数时候都是：

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

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

尝试以下方法：

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

window.onload=function（）{
编写（“用以下内容包装javascript代码：

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

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



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_fleet=“”；var mst_lat=“”；var mst_lng=“”；var mst_zoom=“”；var mst_show_名称=“0”；var mst_scroll_wheel=“true”var mst_show菜单=“true”；
函数loadMap（）{
var元素=document.createElement（“脚本”）；
setAttribute（“id”，“myshiptrackingscript”）；
setAttribute（“async”和“”）；
setAttribute（“延迟”，“延迟”）；
element.src=”http://www.myshiptracking.com/js/widgetApi.js";
document.getElementById（“mapContent”）.appendChild（元素）；
}      
window.onload=loadMap
console.log（'Registered onload'）
您确定没有收到任何脚本错误吗？用户的浏览器可能会停止脚本的执行，以防止名为“跨站点请求伪造”的攻击您的地图是什么类型的？我们是在谈论图像、iFrame还是什么？除了格式化之外，您显示的两个代码片段似乎是相同的…我的第一步是检查最后一行的实际情况-它是否运行？是否
元素
未定义？是否
getElementsByTagName
匹配任何内容？我尝试了您的代码，但从
widgetApi
脚本中发现一个错误…您的
onload
函数似乎已完全执行且没有任何错误错误，但外部脚本的计算会引发错误…
uncaughttypeerror:无法读取widgetApi.js:32处widgetApi.js:33处null的属性'parentNode'
after
createElement
似乎解决了
parentNode
错误，但映射未加载（控制台中没有错误）…外部库添加的
iframe
无法添加到
头节点中…我将您的代码更改为
文档。getElementsByTagName（“正文”）[0]。appendChild（元素）；
（将
脚本
标记添加到
主体
，而不是
头部
）我在我的页面中得到了map
iframe
。该map不可见，但您可以对此进行进一步调查…谢谢，但它导致了一个错误：SyntaxError:“”literal未在脚本结束前终止谢谢。我目前正在处理localhost，可能因为这个原因，我没有看到该map。我确实看到了日志消息。另一方面，在地图上，你应该会看到很多图标显示一艘船的移动；）你可以使用类似于名为http server的节点包的东西来模拟服务器服务，以避免文件服务问题……在我的开发环境（https Web服务器）上试用了一下，脚本中加载了图标：）var的previor-to函数似乎没有使用（您应该看到一张schip的图片），但看看我以后是否可以修复它。（XML解析错误：找不到根元素位置：行号1，第1列：）虽然在网站的大多数页面上它都能正常工作，但是在文章页面上它却不能正常工作，f.i.在控制台日志中它说“MyShipTracking loaded”，但它没有显示出来。你有什么想法可以解决这个问题吗？提前谢谢！