Question

我正在尝试创建一个Chrome扩展程序，将当前页面的内容放入一个iframe，将另一个页面的内容放入另一个iframe，并将它们并排显示（两个iframe都是width:50%;float:left ）。

我得到的是：

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，其内容可能会在{ {1}}。

如何让iframe呈现css和js？

Answer 1

此问题是由于iframe的资源无法确定主机的内容。因此，因为我的引用都是相对的，所以它们无法完成整个路径。即我已将iframe的src设置为HTML字符串，并且css路径类似于/css/styles.css - 它无法相对于HTML字符串解析/css/styles.css。

解决方案是在HTML的开头添加<base href="" />标记：

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标记告诉所有相对网址将href属性添加到自己;即将相对css网址从/css/styles.css转为http://example.com/css/styles.css

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

1 个答案: