Question

在我的扩展程序中，我有一个内容脚本，可在当前网页（例如www.google.com）中创建包含<div>的{{1}}。我将页面加载到iframe中，但内容必须是动态的，因此我首先使用<iframe>将一堆HTML发布到后台页面。 iframe页面然后查询后台页面（再次使用sendRequest），获取HTML并将其添加到页面的正文中。

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

sendRequest

不幸的是，我有两个问题。首先，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);事件永远不会被触发（为什么？）。其次，由于iframe是从其他域加载的，因此无论如何我都无法访问DOMContentLoaded。

我可以让iframe使用iframe.contentDocument将其大小发布到托管页面可以获取的地方。但是，我使用相同的代码将iframe插入到弹出窗口中，因此没有简单的方法来发送请求（因为它将sendRequest用于内容脚本，但chrome.tabs.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";
});

从Chrome扩展程序内容脚本调整iframe到动态内容的大小

1 个答案: