将 JavaScript 动态加载到 Div答案

【问题标题】：Loading JavaScript Into Div Dynamically将 JavaScript 动态加载到 Div
【发布时间】：2011-12-11 06:41:47
【问题描述】：

我需要将 JavaScript 代码（我无法控制）从 URL 加载到 div 中。 JavaScript 代码是一堆 document.write() 语句。一旦 document.write() 语句完成执行，我需要使用 jQuery 或 JavaScript 从 div 中提取结果文本，并将该文本用于其他内容。目前，我正在执行以下操作以将 JavaScript 加载到 div 中：

    $('body').append('<div id="mydiv" style="display: none"></div>');
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    $('#mydiv').append(script);

我如何知道 document.write 语句何时完成执行，并且我可以安全地从 div 中提取文本并使用它？或者，有更好的方法吗？

【问题讨论】：

使用定时器，检查.html()是否相同
try this
hackartist：那篇文章有些相关，但也没有得到答复。 getScript 函数对我不起作用，因为它会将脚本加载到头部（正如它应该的那样）。
我想知道你是否可以用你自己的函数暂时覆盖document.write：var dw = document.write;document.write = function(text) { /* ... monitor and store text... */ }

标签： javascript jquery

【解决方案1】：

你可以设置一个只有这个的 html 页面（在这个例子中它被称为test2.html）：

<script type="application/javascript" src="<url of JavaScript>.js"></script>

然后，您可以将此页面加载到 iframe 中的 DOM 中，并附加一个 load 事件处理程序，该处理程序在加载完成后获取页面的内容。此示例还从 DOM 中删除了 <iframe>：

$(function () {

    //append the iframe onto the body, then select it and attach an event handler for the `load` event
    $('body').append('<iframe id="myiframe" style="display: none"></iframe>').children('iframe').on('load', function () {

                //set the html of the `mydiv` element to the body of the loaded page (test2.html)
        $('#mydiv').html($(this).contents().children().children('body').html());

                //remove the iframe from the DOM
        $(this).remove();

      //set the source of the iframe after the `load` event handler is setup to make sure it fires properly
    }).attr('src', 'test2.html'); 
});

这是一个演示：http://apexeleven.com/stackoverflow/document.write/test.html

请注意，.on() 是 jQuery 1.7 中的新内容，在这种情况下与 .bind() 相同。

【讨论】：

有趣。让我看看这个。谢谢。
看起来（没有尝试），这实际上会起作用。但我最初的解决方案是在原始 HTML 文档的 div 中包含 JavaScript，然后通过 jQuery 提取它。该解决方案有效但很混乱。这个更麻烦:) 不过我会给你+1，因为从技术上讲，这是一个解决方案。

【解决方案2】：

我如何知道 document.write 语句何时执行完毕并且我可以安全地从 div 中提取文本并使用它？

你的方法根本行不通。

如果 DOM 已经完成加载（如果您开始以编程方式操作它可能已经完成），那么它将处于关闭状态，因此调用 document.write 将首先调用 document.open 这将删除整个文档。

（如果 DOM 尚未完成加载，则内容将被写入文档的末尾，而不是插入脚本的位置）。

【讨论】：

所以唯一的选择是在第一次加载文档时让脚本标签从一开始就在 div 中？那是我的第一个解决方案，它奏效了。但我想以编程方式完成整个事情。
可以使用document.write编写外文脚本。但是现在你有两个问题！ iframe 解决方案确实是这里最好的解决方案。

【解决方案3】：

document.write() 在您的文档加载后将清除您的文档并开始一个新的。您不会 document.write() 进入已经存在的 div，除非它是包含在该 div 中并在您的文档加载/渲染时加载的内联 javascript。

所以，你有两个选择：

1) 您可以创建一个空的 iframe 并将 JS 加载到该 iframe 中并让它渲染到该 iframe 中。如果您没有 JS 的合作，您可能需要轮询以查看渲染何时完成。如果您正确地创建 iframe，您可以设置一个监视器来查看 iframe 的加载时间。

2) 您可以将 JS 内联包含到您的 div 中，它会在您的页面加载时呈现到您的 div 中。这需要将 div 和脚本文件烘焙到您自己的页面 HTML 中，如下所示：

<div id="renderTarget">
<script src="xxx.js"></script>
</div>

如果你这样做了，那么当你自己的文档完成加载时，你就会知道它已经完成了渲染。

【讨论】：

看来我会回到我原来的解决方案，也就是你回答中的第 2 项。我认为会有一个纯 JavaScript 解决方案。第1项太头疼了:)

【解决方案4】：

你能做的是::

1) 最初将 div 框设置为默认值（零或空）

2) 为 500/1000 MS 设置一个计时器，并检查 div 的文本自上次以来是否发生了变化。

3) 如果文本仍然是默认值，则转到 2

4）如果文本发生变化并超时，则取值作为最终值，否则转到2。

考虑到远程JS会一次性完成所有的写入，也就是它的document.writes之间没有太大的差距

【讨论】：

这可能有效，但不是很优雅。难道没有一种使用 JavaScript 或 JQuery 魔法的方法，我可以在 JavaScript 加载时调用回调方法吗？

【解决方案5】：

您应该会看到jQuery.getScript() 函数。

这是来自文档的示例：

$.getScript('ajax/test.js', function(data, textStatus){
   console.log(data); //data returned
   console.log(textStatus); //success
   console.log('Load was performed.');
});

【讨论】：

我认为这会将脚本插入头部。

【解决方案6】：

$.getScript('foo.js', function() {
 alert('foo.js was loaded, do something cool now');
});

【讨论】：