Встраивание iframe сверху / снизу - PullRequest
Новая
       10

Встраивание iframe сверху / снизу

0 голосов
/ 17 апреля 2020

Я создаю расширение chrome, которое вставляет фрейм в верхней / нижней части страницы в фиксированной позиции. Проблема в том, что на большинстве сайтов, когда я внедряю iframe, он появляется поверх верхнего / нижнего колонтитула. Чего я хочу добиться, так это ввести его и сдвинуть верхний / нижний колонтитул, чтобы он не шел поверх него.

iframe. html

<body>
        <div>This is a div</div>
</body>

iframe. css

.div {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000000;
    background-color: red;
    height: 30px !important;
    width: 100%;
}

содержание . js

$(document).ready(function() {
    var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
    if (!location.ancestorOrigins.contains(extensionOrigin)) {
        var iframe = $("<iframe></iframe>");
        iframe_src = chrome.runtime.getURL('iframe.html');
        iframe.attr("src",iframe_src);
        $("html").append(iframe);
    }
});

содержание. css

/****Top****/
iframe{
    height: 30px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000000000;
    width: 100%;
}

/****Bottom*****/
iframe{
    height: 30px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000000000;
    width: 100%;
}

1 Ответ

0 голосов
/ 17 апреля 2020

Рассмотрим следующий пример.

Скрипка: https://jsfiddle.net/Twisty/p54Lmfbg/8/

JavaScript

$(function() {
  $("body").css({
    marginTop: "30px"
  });

  $("<iframe>", {
    class: "top-frame"
  }).css({
    border: "1px solid #ccc",
    height: "28px",
    position: "fixed",
    top: "0",
    left: "0",
    zIndex: "1000000000",
    width: "100%"
  }).appendTo("body");
  setTimeout(function() {
    $("iframe.top-frame").contents().find("body").html("<div>This is a div in a Frame.</div>");
  }, 100);
});

Ваш код будет другим, так как вы настраиваете источник кадра. Лучше всего по-прежнему использовать .ready() или setTimeout, чтобы позволить рамке загрузить или подготовиться.

...