脚本和嵌入式脚本的SetTimeOut

问题描述

有一个来自2gis的地图，该地图首先加载外部脚本，然后将地图小部件加载到内联脚本中（如果我正确理解了所有内容）。需要延迟加载脚本并仅在加载主脚本之后运行内联脚本。

<script src="https://widgets.2gis.com/js/DGWidgetLoader.js"></script>

<script>new DGWidgetLoader({"width":640,"height":600,"borderColor":"#a3a3a3","pos":{"lat":52.291708811505536,"lon":104.33831691741945,"zoom":16},"opt":{"city":"irkutsk"},"org":[{"id":"1548640653330917"}]});</script>

我已经尝试了其他选项，包括以下选项，但是结束</script>标记时发生错误。

window.addEventListener('load',function() {
  setTimeout(function() {
    elem = document.createElement('script');
    elem.src = 'https://widgets.2gis.com/js/DGWidgetLoader.js';
    elem.onload = function() {
      document.dispatchEvent(new CustomEvent('scroll'))
    }
    document.body.appendChild(elem);
  },2000);
},false);

window.addEventListener('load',function() {
  setTimeout(function() {
    jQuery("#2gismaps").append('<script>new DGWidgetLoader({"width":640,"org":[{"id":"1548640653330917"}]});</script>');
  },3000);
},false);

<div id="2gismaps" style="width: 100%; height: 420px;"></div>

解决方法

您无需在HTML中输出JavaScript即可运行它。脚本加载后，您可以在onload处理程序中运行JavaScript。 onload方法使您可以控制在加载完成后执行某些操作。

window.addEventListener('load',function() {
  let script = document.createElement('script');
  script.src = 'https://widgets.2gis.com/js/DGWidgetLoader.js';
  script.onload = function() {
    // The script has now loaded,so you can call the DGWidgetLoader loader.
    new DGWidgetLoader({
      "width":640,"height":600,"borderColor":"#a3a3a3","pos": {
        "lat":52.291708811505536,"lon":104.33831691741945,"zoom":16
      },"opt": {
        "city":"irkutsk"
      },"org": [
        {
          "id":"1548640653330917"
        }
      ]
    });
  }
  document.body.appendChild(script);
},false);