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

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 附加到正文中，然后我正在做：

$('#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 几乎相同，只是它不会清除文档。