将iframe从Chrome扩展内容脚本调整为动态内容

Question

在我的扩展中，我有一个内容脚本，在当前网页（例如www.google.com）内创建一个包含的<div>。我将页面加载到iframe中，但内容必须是动态的，所以我首先使用sendRequest将一堆HTML发布到背景页面。 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是从不同的域加载的，我估计无论如何都无法访问iframe.contentDocument。

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

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

Answer 1

捅了一下，找到了一个解决方案。 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"; 
});