如何用包含页面内容的iframe替换页面的内容？

-2

我想创建一个扩展插件，将当前页面的内容放入一个iframe中，并将另一页面的内容放入另一个iframe中，并且将它们并排显示（两个iframe均为width:50%;float:left）。如何用包含页面内容的iframe替换页面的内容？

我得的是：

var h = jQuery('html'); 
h.html('<iframe src="data:text/html;charset=utf-8,' + escape(h.html()) + '" style="width:50%; float:left;"></iframe><iframe src="...');

我的问题是它不是渲染CSS或加载JS。

作为一种权宜之计，我设置src属性为location.href，但只完成当前页面的GET，其内容可在POST改变。

如何获取iframe以呈现css和js？

来源

2017-07-04 Richard Parnaby-King

我不介意倒票，只要它们伴有建设性的意见。 **为什么我会被拒绝投票？** –

此问题是由于iframe的资源无法计算出主机是什么。因此，因为我的参考资料都是相对的，所以他们无法找到完整的路径。即我已将iframe的src设置为一个HTML字符串，并且css路径与/css/styles.css类似 - 它无法解析/css/styles.css相对于HTML字符串。

的解决方案是一个<base href="" />标签添加到HTML的头：

h.find('head').prepend('<base href="'+location.origin+'"/>');

完整的剧本，现在看起来像：

var h = jQuery('html'); 
h.find('head').prepend('<base href="'+location.origin+'"/>'); 
h.html('<iframe src="data:text/html;charset=utf-8,' + escape(h.html()) + '" style="width:50%; float:left;"></iframe><iframe src="...');

的base标签告诉所有的相对URL前面加上属于自己的href;即把相关的css url从/css/styles.css改为http://example.com/css/styles.css

来源

2017-07-04 11:22:46

根据您的使用情况，您可能会遇到一些网站，这些网站会应用framebusting，即检测是否加载到iframe中，然后在_top中重新加载或拒绝加载等（作为安全措施或出于与控制有关的任何其他原因）。 –

如何用包含页面内容的iframe替换页面的内容？

回答

相关问题