动态添加的脚本将不会执行

Dynamically added script will not execute

本文关键字：执行 脚本 添加 动态      更新时间：2023-09-26

我正在动态添加github gist的脚本。如果在页面加载之前将其添加到html中，则脚本将执行。但是如果我尝试在它加载后将它添加到页面中，它会将脚本添加到页面中，但不会执行它。

这是我如何添加它到页面

Html 

<div id="results"></div>
Javascript 

$('#results').click(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://gist.github.com/1265374.js?file=GetGists.js";
    document.getElementById('results').appendChild(script);
    console.log('script added');
});

下面是实例

http://jsfiddle.net/guanome/JqB3g/3/

所以，我能看到的最好的选择是重写(即使只是暂时的，而脚本加载)document.write。这是一种变通，但由于您无法控制进入的代码，我认为这可能是您所拥有的最好的方法。您也不应该在页面加载后的任何时候使用document.write，但以防万一，我可能会仔细检查您的代码。

这是一个可行的解决方案。如果您想在脚本加载后恢复document.write，您可以始终检查script.complete是否为true，否则，侦听onload事件，这应该允许您将document.write更改回来。我现在懒得将其编码到小提琴中，但这将是通常的代码:

script.src = "...";
document.getElementById("results").appendChild(script);
if(script.complete) document.write = document._write;
else script.load(function() { 
    // Goes to the end of the run queue so that the script 
    // is guaranteed to run before this code
    setTimeout(function(){document.write = document._write;},0);
});

它正在执行，但它不会工作，因为它使用document.write，这只能同步使用。包括async document.write，并修改脚本如下:

$('#results').click(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://gist.github.com/1265374.js?file=GetGists.js";
    document.write.to = {filename: script.src};
    document.getElementById('results').appendChild(script);
    console.log('script added');
});

经过几个小时的尝试，我能够完成这个，包括所有其他的答案在这里。我的脚本标签看起来像这样:

<script src="https://somedomain.com/some.js"></script>

所以没有eval()是可能的。

我最后使用了jQuery.getScript()，它获取js文件并执行它:

var $scriptTag = $('#myElement script');
var scriptSrc = $scriptTag.attr('src');
$.getScript(scriptSrc);

作为替代，我偶然发现了一个库，它似乎可以为你处理这个问题。检查一下Injector.js，它应该可以为你工作。

你的脚本正在执行，你只是不能使用文档。用它来写。使用alert进行测试，避免使用document.write。你的js文件的语句与document。不执行写操作，执行函数的其余部分

尝试美元(这).append(脚本)或美元(这). html(脚本)

相关文章：