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

Posted 2023-05-09

【中文标题】在 div 容器内动态调用异步脚本

【英文标题】：Dynamically calling asynchronous script inside a div container

【发布时间】：2014-12-09 13:05:35

【问题描述】：

我正在使用 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);

【问题讨论】：

如果外部脚本使用document.write()，它的目的是在解析时加载，而不是在页面解析后加载。您根本无法使用它，因为它会打开一个新文档并清除旧文档的所有内容。

也许获取原始脚本并使用其他适当的 DOM 操作查找/替换所有 document.write 调用

@Teemu 所以你的意思是我不能将它动态附加到 div2？

我无法控制外部脚本，也无法操纵它。还有其他出路吗？

可能，如果您提供更多有关情况的上下文（例如脚本是什么），您可以得到更好的帮助。

【参考方案1】：

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

想法 1：

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

$.getScript( 'externalscript.js' );

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

想法 2：

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

想法 3：

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

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

【讨论】：

想法 3：“它可以在 div 容器内工作并呈现内容”，document.write()。这就是为什么不进入头脑的原因，尽管它在 div 中也不起作用......

【参考方案2】：

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

如果你把它添加到html中，也许可以将它添加到隐藏的div中，当你需要它时，你可以将它移动到动态创建的div中。

【讨论】：

我这样做了，但它不起作用。我尝试隐藏它，然后通过将其附加到 div 来执行 .show() 但它没有附加

【参考方案3】：

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

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

insertAdjacentHTML 的作用与document.write 几乎相同，只是它不会清除文档。

【讨论】：

我应该在 document.getElementById('scripthere') 中给出的 id 是什么。不清楚。我看到的外部脚本没有 id

你有 div2here，我的 sn-p 似乎从我的测试代码中继承了 id。我已经解决了这个问题。

哦，好的。 & 'beforeend' 到底在做什么？

它告诉方法在#div2here 的结尾之前插入html。有关更多信息，请阅读我在答案中链接的 MDN 文章。