Question

我将一个外部脚本附加到一个带有Jquery / JS的div。我不能在头部包含外部脚本。我需要将它附加到使用Jquery创建的div。外部脚本异步加载，使用document.write，我无法控制该脚本。

我最终想要的是加载外部脚本并动态地将其附加到div。我正在使用JavaScript创建这个div。所以这必须只在js中完成，而不是在html中。如果我将外部脚本静态放在html中它可以工作，但不会在div容器中呈现内容。但是，当我动态放置它时，它将无法工作。

这是我尝试过的。但是我看不到脚本也没有将对象附加到div中。我需要在div中放入脚本，以便在其中呈现内容。

// this is the external code
// the externalscript.js takes in the value of externalprop1 & renders an iframe inside "div2" so externalobject has to be defined before the externalscript.js is called.  
var externalobject = {
    externalprop1 = "prop1"
};

var newscript      = document.createElement("script")
    newscript.type = "text/javascript"
    newscript.src  = "externalscript.js"

// end of external code

dynamic_content =  '<li>';
dynamic_content += '<div class=" div1">';
dynamic_content += '<div class="div2" id= "div2here"></div>';
dynamic_content += '</div>';
dynamic_content += '</li>';

我已将dynamic_content附加到body＆amp;然后我在做：

$('#div2here').append(newscript);

Answer 1

如果我的猜测是正确的，你只是因为需要从远程位置加载脚本而将脚本放入div。

创意1：

也许服务器托管远程脚本允许CORS。在这种情况下，您可以简单地使用类似jQuery getScript函数来执行远程内容：

$.getScript( 'externalscript.js' );

有许多方法可以从远程位置获取和执行脚本（例如ScriptManJS），但由于您无法加载远程内容，因此您应该坚持使用当前可用的内容--JQuery或纯JavaScript

创意2：

如果远程主机不支持CORS（浏览器在调试器控制台中抛出异常而没有任何反应），也许你有一些自己的服务器可以用作代理？您的服务器可以下载所需的脚本，然后允许您的代码使用AJAX（跨域或本地，根据您正在修改的系统）下载它。通过这种方式，您可以绕过CORS限制。

创意3：

最后，为什么你说你不能使用JavaScript把脚本放到头上？您是否尝试过类似的东西（我认为在这种情况下应该将newscript用作jQuery对象）：

$('head').append( $( newscript ) );

Answer 2

如果我将外部脚本静态放置在html中，它将起作用，但不会呈现内容在div容器内。但是，当我动态放置它时，它不会起作用。

如果您将其添加到html中，可能会将其添加到隐藏的div中，当您需要它时，您可以将其移动到动态创建的div。

Answer 3

您可以在加载外部脚本之前覆盖本机document.write方法。像这样：

document.write = function (html) {
    document.getElementById('div2here').insertAdjacentHTML('beforeend', html);
};
var newscript = document.createElement("script");
                     :

insertAdjacentHTML与document.write几乎完全相同，只是它没有消除文档。

在div容器内动态调用异步脚本

3 个答案: