一尘不染

动态地将javascript插入使用document.write的HTML中

ajax

我当前正在加载灯箱样式弹出窗口,该弹出窗口将从XHR调用中加载HTML。然后,使用“ element.innerHTML = content这就像一个超级按钮”在“模式”弹出窗口中显示此内容。

在该网站的另一部分中,我使用Flickr’徽章’(http://www.elliotswan.com/2006/08/06/custom-flickr-
badge-api-documentation/)动态加载flickr图像。这是通过包含一个脚本标签完成的,该脚本标签加载了flickr
javascript,而JavaScript又执行了一些document.write声明。

当包含在HTML中时,它们两者都可以完美地工作。加载的flickr徽章代码只有当 内部
灯箱,没有内容在所有渲染。似乎使用语句innerHTML编写document.write已走得太远,但我无法在这种行为的javascript实现(FF2&3,IE6&7)中找到任何线索。

任何人都可以澄清这是否应该工作吗?谢谢。


阅读 203

收藏
2020-07-26

共1个答案

一尘不染

通常,使用innerHTML时不会执行脚本标签。在您的情况下,这很好,因为该document.write调用将清除页面中已有的所有内容。但是,这使您无需再添加任何HTML
document.write。

jQuery的HTML操作方法将为您执行HTML脚本,然后诀窍是捕获document.write对HTML
的调用并将HTML放置在正确的位置。如果足够简单,那么将执行以下操作:

var content = '';
document.write = function(s) {
    content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);

虽然变得复杂。如果脚本在另一个域上,它将被异步加载,因此您必须等到完成后才能获取内容。另外,如果它只是将HTML写入片段的中间而没有可轻松选择的包装元素呢?writeCapture.js
(完全公开:我写了它)解决了所有这些问题。我建议只使用它,但是至少您可以查看代码以了解其如何处理所有内容。

编辑:这是一个页面,展示听起来像您想要的效果。

2020-07-26