поместить iframe в определенную точку в теле HTML-страницы? - PullRequest
Новая
       0

поместить iframe в определенную точку в теле HTML-страницы?

0 голосов
/ 11 февраля 2011

У меня есть следующее .. 

var insertbeforenode = document.body;


var outerdiv = doc.createElement('div');
outerdiv.id = '_dialog_div';
outerdiv.style.display = "none"; 

var overlay = doc.createElement("link");
overlay.href = chrome.extension.getURL("overlay.css");
overlay.rel = "stylesheet";
overlay.type = "text/css";
outerdiv.appendChild(overlay);

var iFrame = doc.createElement('iframe');
iFrame.id = '_dialog_iframe';
iFrame.name = '_dialog_iframe';

outerdiv.appendChild(iFrame);
doc.body.appendChild(outerdiv);

Однако, как и ожидалось, он добавляет outerdiv к нижней части страницы, что я не хочу делать. Я хотел бы вставить его до insertbeforenode. Я пробовал insertbeforenode.parentNode.insertBefore(outerdiv, insertbeforenode);, но в Chrome это не работает. У кого-нибудь есть какие-нибудь решения?

РЕДАКТИРОВАТЬ: Просто чтобы прояснить эффект, который я хочу создать .. 

<html>
  <head></head>
    <iframe here> </iframe here>
  <body> </body>
</html>

1 Ответ

0 голосов
/ 11 февраля 2011

Когда я делаю это в Firefox: 

<html>
    <head></head>
    <iframe> </iframe>
    <body> </body>
</html>

Это выглядит так же, как это: 

<html>
    <head></head>
    <body>
        <iframe></iframe>
    </body>
</html>

Но ваши комментарии и заметки указывают, что вы пытаетесь разместить iframe поверх страницы без изменения внешнего вида основного содержимого.

Что вам действительно нужно, так это структура: 

<html>
    <head></head>
    <body>
        <!-- Normal content goes here -->
        <iframe>
            <!-- Added iframe goes at the bottom -->
        </iframe>
    </body>
</html>

Затем вы устанавливаете position:absolute; на iframe;дайте ему обычные width и height;а затем установите top, left и поля на центр it.Возможно, вам также придется поиграться со значениями z-index на iframe, но это зависит от содержимого страницы.

Добавление абсолютно позиционированного элемента внизу <body> - это обычный способ достижениячто вы пытаетесь сделать, и это будет работать примерно так же в любом браузере, который может обрабатывать iframe.

Вот простой пример: http://jsfiddle.net/ambiguous/KrjBv/. Вы уже знаете, как сделатьJavaScript и я просто пытаюсь проиллюстрировать позиционирование CSS, поэтому я использовал jQuery, чтобы уменьшить шум.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...