将 <Script> 标签附加到正文？答案

【问题标题】：Append <Script> Tag to Body?将 <Script> 标签附加到正文？
【发布时间】：2015-07-23 11:19:00
【问题描述】：

我想将脚本标签附加到我的 HTML 页面的正文中。我在我的页面中添加了以下内容：

<script type="text/javascript">  

    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' +
                'callback=initialize';
        document.body.appendChild(script);
    }

    window.onload = loadScript;

</script>

我尝试在JSFidle 中运行它并没有问题。

当我在演示服务器上运行的 html 页面上运行它时，我在控制台中收到以下错误：

Uncaught TypeError: undefined is not a function

导致此错误的原因以及如何预防？

编辑：删除类型 text/javascript 不会改变任何东西。

【问题讨论】：

在您的 jsfiddle 中，您可以选择让 JS 在 onLoad 上运行，这实际上使您的代码在 `window.onload` 之后执行，因此永远不会调用 loadScript() 函数
去掉text/javascript类型，试试
不应该是loadScript()。你有loadScript
@RobScott — 不，绝对不是。它正在为事件处理程序属性分配一个函数。
你试过setTimeout吗？

标签： javascript jquery html

【解决方案1】：

你得到的错误是因为没有initialize() 函数。如果您声明一个，则不会出错。

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
    document.body.appendChild(script);
    console.log('loadScript');
}

function initialize() {
    console.log('initialize');
}

window.onload = loadScript;

【讨论】：

【解决方案2】：

我尝试在 JSFidle 中运行它并没有问题。

不正确。在 JSFiddle 你有一个不同的 问题。

当文档加载事件触发时，您可以在此处运行代码。该代码定义了一个函数并为文档加载事件分配了一个事件处理程序。由于该事件已经触发，因此该函数永远不会运行。您不会收到错误，因为代码没有达到您在独立文档中测试时的程度。

当我在演示服务器上运行的 html 页面上运行它时，我在控制台中收到以下错误：

在这种情况下，代码运行成功。

加载事件触发。 loadScript 函数运行。脚本元素被附加到页面。 Google 的脚本运行。

你得到一个错误是因为你说：

 'callback=initialize'

因此，您向 Google 请求的脚本尝试调用 initialize()，但您尚未定义该函数，因此您会收到错误。

另见the documentation，其中包括此示例：

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
      '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

【讨论】：