动态加载JavaScript到Div

时间:2011-12-10 22:10:09

标签: javascript jquery

我需要将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中提取文本并使用它?或者,有更好的方法吗?

6 个答案:

答案 0 :(得分:2)

你可以设置一个只有这个的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()相同。

答案 1 :(得分:1)

  

我怎么知道document.write语句何时完成执行,我可以安全地从div中提取文本并使用它?

你的方法根本不起作用。

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

(如果DOM尚未完成加载,则内容将写入文档的末尾,而不是写入脚本的位置。)

答案 2 :(得分:0)

你能做的是::

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

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

3)如果文本仍然是默认值,请转到2

4)如果文本已更改并超时,请将值作为最终值,否则转到2。

考虑到远程JS会立即完成所有写作,也就是说,document.writes

之间没有很大差距

答案 3 :(得分:0)

您应该看到jQuery.getScript()功能。

这是来自doc的例子:

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

加载文档后

document.write()将清除文档并开始新文档。你没有document.write()进入已经存在的div,除非它是包含在该div中的内联javascript并在文档加载/渲染时加载。

所以,这有两个选择:

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

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

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

如果你这样做,那么你会知道在你自己的文档加载完成后它就完成了渲染。