Google Chrome, HTML панель инструментов - всегда на вершине проблемы - PullRequest
Новая
       12

Google Chrome, HTML панель инструментов - всегда на вершине проблемы

1 голос
/ 25 марта 2011

Я работаю над панелью инструментов для Google Chrome как часть расширения.Допустим, панель инструментов представляет собой простой прямоугольник, описанный ниже css: 

#top{
    display: none;
    width: 100%;
    background: red;
    z-index:9999999;
    height:40px;

}

Я вставляю панель инструментов, которая выглядит менее похожей на: 

<body>
    <div id="panel_left">
    ....
    </div>
    <div id="panel_right">
    ....
    </div>
</body>

И я вставляю ее в iframe с помощью: 

$("body").before('<iframe name="top" id="top" frameborder="0"></iframe>');
var top = document.getElementById("top");
top.src = chrome.extension.getURL("top.html");

Проблема возникает на некоторых веб-страницах из-за их CSS, который может покрывать мою панель инструментов.Я ожидаю, что панель инструментов, начинающаяся с самого верха веб-сайта, займет 40 пикселей в высоту, а затем отобразит обычный контент веб-страницы.

Есть ли у вас какие-либо идеи, как это сделать (или, скорее, улучшить, потому что она работает нанекоторые веб-страницы)

Ответы [ 2 ]

1 голос
/ 26 марта 2011

Вы пытались добавить: 

top: 0;
left: 0;
margin: 0;
padding: 0;

Добавьте это, прежде чем вставить свою панель инструментов: 

// Take down the webPage
document.getElementsByTagName('body')[0].style.marginTop = '39px'; 
// Or more if your toolbar is greater
0 голосов
/ 25 марта 2011

Просто для всех пользователей, ищущих одно и то же решение.Работает: 

body
{
position: fixed;
width: 100%;
height: 100%;
position:relative;
}
...