2

新しいパネルを現在のWebページの下部にドッキングするChrome拡張機能を開発したいと思います。GUIは開発者ツールのようなものでなければなりません。

次のようにiframeをWebページに挿入しようとしました。

$('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

したがって、これでは、ページの下部 300px がパネルから覆われないように、下にあるページを調整していません。以下は、ページの下部を 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(ことをお勧めします。非常に基本的なものにバニラ javascript を使用することもお勧めします。これは次のようになります。document.documentElementbody

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 に答える