0

<script>在 HEAD 本身完全加载之前,我可以在 HEAD 中附加一个元素吗?

例子:

<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>手动添加另一个

非常感谢

4

3 回答 3

0

这几乎就是 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 使用一个队列,您可以向其中添加函数调用,一旦脚本可用,该队列就会执行。

于 2011-03-18T23:59:56.973 回答
0

在完全加载之前,头部元素将不可用。不过,您可以使用不同的方法:

仅包含一个名为“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()">

(此示例取自德国网站并对其进行了修改。)

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

于 2011-03-19T00:01:52.357 回答
0

在页面加载的这个时候进行 DOM 修改通常是不安全的,但是 document.writeln('<script language="javascript" src="otherfile.js" />'); 应该没事。

于 2011-03-19T04:07:51.773 回答