Question

在HEAD本身完全加载之前，我可以在HEAD中追加一个<script>元素吗？

示例：

<head>
<script src="my.js">
//etc

在my.js中有：

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

此代码将在浏览器到达</head>

之前执行

这样安全或可能导致问题吗？我想这样做因为我想从我的.js脚本加载jquery所以我不必编辑我的页面来手动添加其他<script>

非常感谢

Answer 1

这就是Google Analytics异步跟踪代码的功能，它通常不会遇到问题。使用与GA类似的技术，它可能如下所示：

(function() {
   var thescript = document.createElement('script');
   thescript.type = 'text/javascript';
   thescript.src = 'otherfile.js';
   var s = document.getElementsByTagName('script')[0]; 
   s.parentNode.insertBefore(thescript, s);
})();

但是，请记住'otherfile.js'中的代码可能不会立即可用，因此您需要考虑这一点。 GA使用一个队列，您可以添加函数调用，一旦脚本可用就会执行。

Answer 2

头部元素在完全加载之前将不可用。但是，您可以使用不同的方法：

仅包含一个名为“includes.js”的文件。它应该是这样的：

function include_once(src) {
  // get script elements already in the HTML source code,
  // abort if script has been loaded
  var scripts = document.getElementsByTagName('script');
  if ( scripts ) {
    for ( var k=0; k < scripts.length; k++) {
      if ( scripts[k].src == src ) return; 
    }
  }
  // include if not already loaded
  var script = document.createElement('script');
  script.src = src;
  script.type = 'text/javascript';
  (document.getElementsByTagName('head')[0] || document.body).appendChild(script);
}

// add all your scripts here
function addIncludes () {
    include_once ( 'js/my.js' );
}

然后，调用addIncludes onload：

<body onload="addIncludes()">

（此示例是从german site获取和修改的。）

如果你有JS必须在加载后直接执行，你需要设置一个间隔并测试其他.js文件的可用性 - 记住它们在原始页面完成后加载

Answer 3

在页面加载中此时进行DOM修改通常是不安全的，但是document.writeln（'＆lt; script language =“javascript”src =“otherfile.js”/＆gt;'）;应该没事。

在节点完成加载之前的appendChild？

3 个答案: