在节点完成加载之前的appendChild？
[英]appendChild before the node is completed loaded?
问题描述
Can I appendChild a <script> element in the HEAD before the HEAD itself is completly loaded? 
我可以在HEAD本身完全加载之前在HEAD中追加一个<script>元素吗？
Example: 例：
<head>
<script src="my.js">
//etc
in the my.js there is: 在my.js有：
var thescript = document.createElement('script');
thescript.setAttribute('type','text/javascript');
thescript.setAttribute('src','otherfile.js');
document.getElementsByTagName('head')[0].appendChild(thescript);
this code will be executed before browsers reach </head> 该代码将在浏览器到达</head>之前执行
is this safe or could cause problmes? 这是安全的还是会引起问题？ I want to do this because I want load jquery from my .js script so i don't have to edit my pages to add the other <script> manually 我要这样做是因为我想从我的.js脚本中加载jquery，所以我不必编辑页面即可手动添加其他<script>
Many Thanks 非常感谢
3 个解决方案
解决方案1
0 2011-03-18 23:59:56
That's pretty much what the Google Analytics Asynchronous tracking code does and it doesn't usually encounter problems. 这几乎就是Google Analytics（分析）异步跟踪代码所做的，并且通常不会遇到问题。 Using a similar technique to GA it could look as follows: 使用与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);
})();
However, remember that the code inside 'otherfile.js' might not be available straight away so you need to take that into consideration. 但是，请记住，'otherfile.js'中的代码可能无法立即使用，因此您需要考虑到这一点。 GA uses a queue that you can add function calls to that will execute once the script is available. GA使用一个队列，您可以向其中添加函数调用，一旦脚本可用，该队列将执行。
解决方案2
0 2011-03-19 00:01:52
The head element will not be available before it is fully loaded. head元素在完全加载之前将不可用。 You can use a different approach, though: 但是，您可以使用其他方法：
Include only one file, called "includes.js". 仅包含一个名为“ includes.js”的文件。 It should look like this: 它看起来应该像这样：
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' );
}
Then, call addIncludes onload: 然后，调用addIncludes onload：
<body onload="addIncludes()">
(This example was taken and modified from a german site .) （此示例是从德国站点获取并修改的。）
If you have JS that has to be executed directly after loading, you need to set an interval and test for availability of the additional .js files - remember they are loaded after the original page is complete. 如果您有必须在加载后直接执行的JS，则需要设置间隔并测试其他.js文件的可用性-请记住，它们是在原始页面完成后加载的。
解决方案3
0 已采纳 2011-03-19 04:07:51
It's generally not safe to do DOM modification at this point in the page load, but a document.writeln('<script language="javascript" src="otherfile.js" />'); 在页面加载时，此时进行DOM修改通常是不安全的，但是document.writeln（'<script language =“ javascript” src =“ otherfile.js” />'）; should be fine. 应该没事。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.