动态加载JavaScript到Div
我需要从URL加载JavaScript代码(我无法控制)到div。 JavaScript代码是一堆document.write()语句。 一旦document.write()语句完成执行,我需要使用jQuery或JavaScript从div中提取结果文本,并将该文本用于其他内容。 目前,我正在执行以下操作将JavaScript加载到div中:
$('body').append(''); var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; $('#mydiv').append(script);
我怎么知道document.write语句何时完成执行,我可以安全地从div中提取文本并使用它? 或者,有更好的方法吗?
加载文档后的document.write()
将清除您的文档并开始一个新文档。 你没有将document.write()
转换为已经存在的div,除非它是包含在该div中的内联javascript,并在文档加载/渲染时加载。
所以,这有两个选择:
1)您可以创建一个空的iframe并将JS加载到该iframe中,然后将其渲染到该iframe中。 如果您没有JS的合作,您可能需要轮询以查看渲染何时完成。 如果您正确创建iframe,则可以设置监视器以查看iframe的加载时间。
2)您可以将JS内联包含到div中,并在页面加载时将其呈现到div中。 这需要将div和脚本文件烘焙到您自己的页面HTML中,如下所示:
如果你这样做,那么你会知道在你自己的文档加载完成后它已经完成渲染。
你可以设置一个只有这个的html页面(在这个例子中它叫做test2.html
):
然后,您可以将此页面加载到iframe中的DOM中,并附加一个load
事件处理程序,该处理程序在完成加载后获取页面内容。 此示例还会从DOM中删除 :
$(function () { //append the iframe onto the body, then select it and attach an event handler for the `load` event $('body').append('').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()
相同。
我怎么知道document.write语句何时完成执行,我可以安全地从div中提取文本并使用它?
你的方法根本不起作用。
如果DOM已经完成加载(如果你开始以编程方式操作它可能有),那么它将处于关闭状态,因此调用document.write
将首先调用document.open
,这将擦除整个文档。
(如果DOM尚未完成加载,则内容将写入文档的末尾,而不是写入脚本的位置)。
你能做的是::
1)最初将div框设置为默认值(零或null)
2)设置一个定时器,为500/1000 MS并检查div的文本是否自上次以来发生了变化。
3)如果文本仍然是默认值,请转到2
4)如果文本已更改并超时,则将值作为最终值,否则转到2。
考虑到远程JS会立即完成所有的写作,也就是说,它的document.writes
之间没有很大的差距
您应该看到jQuery.getScript()
函数。
这是来自doc的例子:
$.getScript('ajax/test.js', function(data, textStatus){ console.log(data); //data returned console.log(textStatus); //success console.log('Load was performed.'); });
$.getScript('foo.js', function() { alert('foo.js was loaded, do something cool now'); });