2

在我的扩展中，我有一个内容脚本，它创建一个<div>包含<iframe>当前网页内部的内容（例如 www.google.com）。我将一个页面加载到 iframe 中，但内容必须是动态的，所以我首先使用sendRequest. 然后 iframe 页面查询背景页面（再次使用sendRequest），获取 HTML 并将其添加到页面的正文中。

问题是添加动态内容时 iframe 的大小不正确，因此它有滚动条。我想做这样的事情：

iframe.addEventListener("DOMContentLoaded", function(event) {
    div.style.height = iframe.style.height = iframe.contentDocument.body.scrollHeight;
    div.style.width = iframe.style.width = iframe.contentDocument.body.scrollWidth;
}, false);

不幸的是，我有两个问题。首先，该DOMContentLoaded事件永远不会被触发（为什么？）。其次，我大概无法访问，iframe.contentDocument因为 iframe 是从不同的域加载的。

我可以使用 iframesendRequest将其大小发布到托管页面可以使用的位置。但是，我也使用相同的代码将 iframe 插入到弹出窗口中，因此没有简单的方法来发送请求（因为它将chrome.tabs.sendRequest用于内容脚本，但chrome.extension.sendRequest用于弹出窗口）。

关于如何做到这一点的任何想法？

4

1 回答 1

3

又摸索了一下，找到了解决办法。iframe 一旦加载了动态内容，就会调用：

var size = { height: document.body.scrollHeight, width: document.body.scrollWidth };
top.postMessage(JSON.stringify(size), "*");

父窗口包含：

window.addEventListener("message", function(event) {
    var size = JSON.parse(event.data);
    iframe.style.height = div.style.height = size.height + "px";
    iframe.style.width = div.style.width = size.width + "px";
});
于 2012-06-08T15:44:43.477 回答