2

我想开发一个 chrome 扩展，它将一个新面板停靠在当前网页的底部。GUI 应该类似于开发人员工具。

我试图像这样将 iframe 注入网页：

$('body').append(
    '<iframe src="'
    + chrome.extension.getURL('panel.html')
    + '" style="position: fixed; width: 100%; bottom: 0px; height: 300px; display: block;"></iframe>');

可以看到 iframe，但它覆盖了主页的内容。我该如何解决这个问题？希望有人能给我一些建议或简单的例子......

4

1 回答 1

1

因此，您无需调整底层页面，以使页面底部的 300 像素不会被面板覆盖。这是一些将页面底部提升 300px 的 javascript：

var html = document.documentElement;
//make sure <html> to the top of the page:
html.style.position = 'relative';
html.style.top = '0px';

window.onresize = function resizeFunc(){
  html.style.height = (window.innerHeight - 300) + 'px';
};
window.onresize();

此外，我建议不要像这样附加到正文：$('body').append(，我建议使用document.documentElement而不是body，甚至使用 vanilla javascript 来做一些基本的事情，这看起来像：

var iframe = document.createElement('iframe');
iframe.style = '<your style code above>';
iframe.src = chrome.extension.getURL('panel.html');
document.documentElement.appendChild(iframe);

我认为这将解决您的问题...不确定您的页面是否有导致错误的独特内容

于 2012-04-11T23:58:37.820 回答