在顶部/底部嵌入 iframe
Posted
技术标签:
【中文标题】在顶部/底部嵌入 iframe【英文标题】：Embedding iframe at the top/bottom 【发布时间】：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 之前必须对每个页面做一些事情，但我似乎并没有弄清楚到底是什么。
【参考方案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 以允许框架加载或准备就绪。
【讨论】：
感谢您的解决方案。但这并不总是有效，特别是如果标题是固定的（如 *** 中的情况）。我需要一个在大多数情况下都有效的近似通用解决方案（如果存在）。以上是关于在顶部/底部嵌入 iframe的主要内容，如果未能解决你的问题，请参考以下文章