正文 

当前位置： 首页 > 源码 >

在顶部/底部嵌入 iframe

     2023-05-09     83

关键词：

【中文标题】在顶部/底部嵌入 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%;

【问题讨论】：

您能否给&lt;body&gt; 一个边距或填充，然后将&lt;iframe&gt; 推入其中？ @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 以允许框架加载或准备就绪。

【讨论】：

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

在页面滚动的底部粘贴元素

】在页面滚动的底部粘贴元素【英文标题】：Stickelementonbottomonpagescroll【发布时间】：2020-11-1116:25:15【问题描述】：我一直在尝试将Spotify嵌入代码嵌入到我的网页中。当我到达iframe时，我希望Spotifyiframe代码粘在页面底部。假设... 查看详情

判断页面是否被嵌入iframe里面(代码片段)

...个问题，在被嵌入大的后台管理系统后，不用显示该页面顶部导航栏和左侧的菜单栏所以我们在项目里面就要做判断，当没有被嵌入iframe里面时，应该正常显示，否则隐藏左侧和顶部window.self===window.top//1.如果返回false–>说明... 查看详情

无论滚动位置如何，iframe 顶部的引导模式。如何在屏幕上定位它？

】无论滚动位置如何，iframe顶部的引导模式。如何在屏幕上定位它？【英文标题】：Bootstrapmodalattopofiframeregardlessofscrollposition.HowdoIpositionitonscreen?【发布时间】：2014-09-0810:15:05【问题描述】：在iframe中嵌入Bootstrap应用时，模式对... 查看详情

从不同域的 iframe 滚动到父级顶部

】从不同域的iframe滚动到父级顶部【英文标题】：Scrolltotopofparentfromiframeondifferentdomains【发布时间】：2017-08-1301:05:55【问题描述】：我在页面中嵌入了一个iframe。它们都在不同的域上，但我可以访问两者。当点击iframe中的链接时... 查看详情

Youtube 的 iframe 嵌入掩盖了 html 元素

...】：2011-08-3021:59:49【问题描述】：我一直在我的示例网站顶部的工具栏上工作：http://theplagueround.com/dev/但它隐藏在任何youtube视频内容后面。我看过一两篇关于向标签添加参数的帖子，但youtube现在也在使用iframe，所以这 查看详情

如何同步iframe与嵌入内容的高度

...载入到a页面后，如何隐藏掉b页面上的元素，如左导航，顶部导航等等 -如何同步iframe与嵌入内容的高度a)获取由iframe引入的页面高度 b)同步引入页面与iframe的高度  demo<iframesrc="ht 查看详情

通过 iframe 嵌入的 YouTube 视频忽略 z-index？

...主要级别导航项目之一上，下拉菜单会正确显示在视频的顶部。然而，在C 查看详情

与顶部布局指南和底部布局指南的距离相等

】与顶部布局指南和底部布局指南的距离相等【英文标题】：equaldistancefromtoplayoutguideandbottomlayoutguide【发布时间】：2017-06-2501:20:23【问题描述】：我正在尝试定位与顶部布局指南和底部布局指南具有相等距离的元素。有没有办法... 查看详情

如何将 swf 文件嵌入到网站上的浮动 iframe 中。书签？

...一名高中生，也是小书签的新手。我想要一个可以在网站顶部制作浮动iframe的书签，其内容为.swf文件。我尝试了许多解决方案，但一个主要障碍是简单地将.swf链接粘贴为iframe内容 查看详情

如何使用嵌入表格的两个容器视图进行布局

...：我正在尝试布局以下UI视图主UI视图有两个容器视图。顶部容器视图嵌入了一个静态表控制器。底部容器视图嵌入了另一个我想要动态的表控制器。如何设置布局，让顶部容器视图的高度等于顶部表格的高度，底部容器视图获... 查看详情

防止整页缩放

...间】：2019-08-0123:10:55【问题描述】：我有一个页面，在半顶部区域有一个svg地图，在半底部区域有一个索引。此页面将显示在触摸屏上。在顶部区域（地图）上使用touch-action:pinch-zoom时，我想将索引（底部区域）与缩放隔离开来... 查看详情

css自定义滚动条

...对于iframe窗口，自带滚动条是整个窗口的大小。有时需要顶部或底部固定，则滚动条不应该触碰到顶部或底部。那么首先打开iframe时应该去掉滚动条scrolling="no"，然后在需要滚动的区域自定义滚动条。<iframeframeborder="0"scrolling="n... 查看详情

在 iframe 中嵌入 Firebase 社交登录

】在iframe中嵌入Firebase社交登录【英文标题】：EmbeddingFirebasesociallogininaniframe【发布时间】：2018-06-2923:26:09【问题描述】：我在iframe中嵌入了一个React应用程序。该应用程序使用firebase-authentication使用Google、Facebook或Twitter登录。虽... 查看详情

在 IE 中打印时 iframe 在底部切割

】在IE中打印时iframe在底部切割【英文标题】：IframecutsatthebottomwhenprintinginIE【发布时间】：2017-12-1809:09:01【问题描述】：在IE11打印下面的页面时，在底部剪切iframe，而不是让它扩展到下一页。如何防止这种情况并让它打印所有... 查看详情

如何停止 UITableView 在顶部和底部的滚动？

】如何停止UITableView在顶部和底部的滚动？【英文标题】：HowcanIstoptheUITableViewoverscrollatthetopandbottom?【发布时间】：2013-06-0510:39:16【问题描述】：我正在使用UITableView和UITableViewCells，我想停止您在列表顶部和底部获得的“过度”... 查看详情

在底部导航栏图标顶部显示徽章

】在底部导航栏图标顶部显示徽章【英文标题】：Displaybadgeontopofbottomnavigationbar\'sicon【发布时间】：2017-07-2916:49:28【问题描述】：我已经在我的应用程序中实现了底部导航视图，并且我已经查看了在图标顶部显示徽章的每个位置... 查看详情

仅在顶部/底部/左侧/右侧启用悬停

】仅在顶部/底部/左侧/右侧启用悬停【英文标题】：Enablehoveronlyontop/bottom/left/right【发布时间】：2021-06-1417:49:19【问题描述】：我正在尝试在Tailwind文件配置中创建一个变体。我想要的是像hover:border-l-4hover:border-green-400这样的类，... 查看详情

在 iFrame 中嵌入 Google Apps 脚本

】在iFrame中嵌入GoogleApps脚本【英文标题】：EmbeddingGoogleAppsScriptinaniFrame【发布时间】：2017-04-1201:50:06【问题描述】：我正在尝试将使用GoogleApps脚本中的Javascript动态构建的页面嵌入到iFrame中的我的网站中，但未显示iFrame的内容。G... 查看详情