在顶部/底部嵌入 iframe答案

【问题标题】：Embedding iframe at the top/bottom在顶部/底部嵌入 iframe
【发布时间】：2020-07-30 09:12:12
【问题描述】：

我正在创建一个 chrome 扩展程序，它在页面顶部/底部的固定位置注入一个 iframe。问题是，在大多数网站中，一旦我注入 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%;
}

content.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);
    }
});

content.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%;
}

【问题讨论】：

您能否给<body> 一个边距或填充，然后将<iframe> 推入其中？
@Twisty 不工作。我认为在注入 iframe 之前必须对每个页面做一些事情，但我似乎并没有弄清楚到底是什么。

标签： jquery html css iframe google-chrome-extension

【解决方案1】：

考虑以下示例。

小提琴：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 以允许框架加载或准备就绪。

【讨论】：

感谢您的解决方案。但这并不总是有效，特别是如果标题是固定的（如 Stackoverflow 中的情况）。我需要一个在大多数情况下都有效的近似通用解决方案（如果存在）。