0

我有一个简单的页面：

<!DOCTYPE html>
<html>
<head>
  <script>
    func = function(message) {
       alert(message);
    }
  </script>
</head>
<body>
  <h1> Visible content </h1>
</body>
</html>

和一个位于单独文件中的脚本——比方说—— test.js：

func("It should block the page.");

当我通过键入以下内容简单地将此脚本添加到头部时：

<script src="test.js"></script>

在内容可见之前显示警报，这对我来说很好。
但是，当我动态添加脚本时：

<script>
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'test.js');
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

警报显示在内容之后。

为什么会这样？浏览器不应该等到脚本完成（包括添加和加载新脚本）吗？是否可以使用动态添加的脚本来阻止正文内容？

4

2 回答 2

1

这是因为异步加载而发生的。看看文章：http ://css-tricks.com/thinking-async/

这取决于您所说的阻塞是什么意思。您可以加载隐藏内容块的页面：<div style="display:none;"></div>并在页面加载后显示它。

这是jQuery方式：

$(function () {
    // do stuff after DOM has loaded
});

看看这个答案了解更多：javascript domready？

于 2013-10-14T22:17:58.040 回答
-1

将其包装在 document.ready 中：

$(document).ready(function () {
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'test.js');
  document.getElementsByTagName('head')[0].appendChild(script);
});
于 2013-10-14T22:09:54.943 回答