开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在不滚动的情况下将多个iframe放入一个页面？

基础概念

iframe 是 HTML 中的一个元素，用于在当前页面中嵌入另一个 HTML 文档。它允许你在一个页面中显示另一个页面的内容，类似于一个窗口。

相关优势

内容隔离：每个 iframe 都是一个独立的文档，不会影响主页面的样式和脚本。
安全性：通过 sandbox 属性，可以限制 iframe 内容的行为，提高安全性。
灵活性：可以嵌入任何网页内容，包括视频、地图、社交媒体等。

类型

iframe 主要有以下几种类型：

静态 iframe：嵌入的内容是固定的，不会随主页面的变化而变化。
动态 iframe：嵌入的内容可以根据主页面的状态或用户的操作进行变化。

应用场景

嵌入第三方内容：如嵌入 YouTube 视频、Google 地图等。
模块化设计：将页面分成多个独立的模块，每个模块使用一个 iframe。
跨域内容嵌入：通过 iframe 可以嵌入不同域名的内容。

问题与解决方案

问题

如何在不滚动的情况下将多个 iframe 放入一个页面？

原因

默认情况下，iframe 的高度和宽度是固定的，如果内容过多，会导致 iframe 内部出现滚动条。如果多个 iframe 都有滚动条，会影响用户体验。

解决方案

固定高度和宽度：为每个 iframe 设置固定的高度和宽度，确保它们不会超出主页面的边界。
使用 CSS 控制布局：通过 CSS 的 display: flex 或 display: grid 属性来控制 iframe 的布局，使其在主页面中均匀分布。
动态调整高度：通过 JavaScript 动态调整 iframe 的高度，使其适应内容的大小。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Iframes</title>
    <style>
        .iframe-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
        }
        .iframe-container iframe {
            width: 45%;
            height: 45vh;
            border: none;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe src="https://example.com/page1"></iframe>
        <iframe src="https://example.com/page2"></iframe>
    </div>
</body>
</html>

参考链接

MDN Web Docs - iframe

通过上述方法，你可以有效地在不滚动的情况下将多个 iframe 放入一个页面，并确保它们在主页面中均匀分布。

相关搜索:如何在不滚动的情况下将flex容器全部保存在一个页面中如何在不丢失约束布局的情况下将所有视图放入可滚动视图中如何在Reactjs中路由更改而不滚动的情况下将页面置于顶部 Laravel 5:如何在不覆盖的情况下将多个项放入集合中的同一个键中？在iframe上按空格会向下滚动父页面，如何在不破坏keyup事件的情况下防止这种情况？如何在不复制此代码的情况下将多个函数放入多个名称空间？如何在不增加页面内容的情况下给滚动条一个固定的高度？如何在不冻结ARSession的情况下将ARSCNView放入Tabview控制器？如何在不丢失图像纵横比的情况下将图像放入形状中？如何在不滚动的情况下将项目添加到ListView开头？如何在不滚动和丢失选择的情况下将文本附加到RichTextBox？如何在不使用web框架的情况下将所有其他页面放入基本模板中如何在不使用Bootstrap的情况下将表划分为多个页面？如何在较小屏幕上不创建水平滚动的情况下将图像居中？如何在不更改url的情况下将某人重定向到错误页面如何在不压低页面其余部分的情况下显示一个模式？如何在Express JS中使用POST在不刷新页面的情况下在一个页面中提交多个表单如何在不丢失上下文的情况下将javascript与JSP页面共享？如何在不创建单独i的情况下在多个项目上使用一个函数？如何在不渲染新页面的情况下只返回jinja的一个变量？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iframe 自适应高度的多种实现方式

需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

03

html多媒体

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>

03

开源 | 携程度假零成本微前端框架-零界

工业聚，携程高级前端开发专家，react-lite, react-imvc, farrow 等开源项目作者。

03

Hijack攻击揭秘

概述 Clickjacking是最近新兴的针对WEB前端的攻击手段。它通常使用一个ifream覆盖掉当前页面，欺骗用户点击iframe中的恶意内容。 Likejacking通常是针对社交网站的一种攻击手法，攻击者会欺骗用户去点击一个伪造的图标或按钮。如今攻击者已经研究出了大量的方法，来把官方的按钮模仿的惟妙惟肖。 Clickjacking技术首先是由Jeremiah Grossman 和 Robert Hanson在2008年提出的，而如今这种依附于JS的攻

09

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

2，页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

03

基于iframe的移动端嵌套

需求描述上上周接到了新的项目，移动端需要做一个底部有五个导航，点击不同的导航页面主体显示不同的页面，其中两个页面是自己做，而另外三个页面是引用另外三个网址，其中两个网址为内部项目，另外一个为外部（涉及跨域）。问题考虑再三后最省时间成本的就是使用iframe，虽然在移动端使用，我的内心是很拒绝的，不过其他方案调研了下都不太符合现状。每点击一次加载一个新的iframe，比较懒，所以两个新页面也做成了iframe，在做的过程中出现了如下问题，这里总结一下： 1.嵌入的iframe页面无法滚动 2.met

06

Web 嵌入 | Electron 安全

大家好，今天和大家讨论的是 Web 嵌入，无论是网站还是应用程序，在部分场景下我们需要嵌入一些第三方的 web 内容，例如我写了篇技术文章，其中部分包含视频内容，我上传到 B 站上了，我想把这段内容嵌入到我的技术文章中，就可能要使用 web 嵌入技术

01

Web自动化必会知识：「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

Dom 对象里面涉及元素定位以及对元素的修改。因为对元素操作当中涉及的一些 js 操作，js 基本语法要会用。得要掌握前端的基本用法。为什么要元素定位？因为找到这个元素，就能告诉代码要找谁要做什么。

02

Web自动化必会「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

Dom 对象里面涉及元素定位以及对元素的修改。因为对元素操作当中涉及的一些 js 操作，js 基本语法要会用。得要掌握前端的基本用法。为什么要元素定位？因为找到这个元素，就能告诉代码要找谁要做什么。

00

关于HTML面试题汇总之H5

一、H5有哪些新特性，移除了哪些元素？如何处理h5新标签的浏览器兼容性问题，如何区分html和html5 1. html5不在是SGL（通用标记语言）的一个子集，而包含了：图像、位置、存储、多任务等功能 2. 新增的图像为canvas类，媒体回放video和audio元素；本地离线存储localStorage，在浏览器关闭后也可以保存数据；而sessionStorage在浏览器关闭后会自动删除数据 3.新增内容标签：article、footer、header、nav、section；新增加表单控件：cale

05

layui框架——弹出层layer[通俗易懂]

Array：例如title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意CSS样式

01

iframe 有什么好处，有什么坏处？

iframe 用于在页面内显示页面，使用 <iframe> 会创建包含另外一个文档的内联框架（即行内框架）

01

深入理解iframe

iframe 用于在页面内显示页面，使用 <iframe> 会创建包含另外一个文档的内联框架（即行内框架）

01

RenderingNG中关键数据结构及其角色

大家好，我是柒八九。今天这篇文章是Chromium最新「渲染架构」 RenderingNG的译文系列文章的「第二篇」 -- 在RenderingNG渲染过程中关键数据结构和它们所担当的角色。

01

如何使用 JavaScript 检测用户是否启用三方 Cookie ？

今天继续来聊 Cookie ，Chrome 已经在 1.4 号开启了三方 Cookie 的 1% 禁用灰度：

01

iframe内部DOM设置样式引发的思考

上篇文章大致分享了web端的拍照方案。一个是input，另外一个是getUserMedia方法，实际上它是webRtc的一个API。

02

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

02

LinkedIn Feed流视频自动播放架构演进

https://engineering.linkedin.com/blog/2019/03/feature-highlight--scaling-autoplay-videos-for-hundreds-of-milli

02

iframe框架及优缺点

HTML5不再支持使用frame，关于frame与iframe的区别，可以参阅 iframe与frame的区别

02

[前端] 记录工作中遇到的各种问题（Bug，总结，记录）

而AjaxFileUpload插件的上传文件处理方式是，获取返回的实体内容，直接进行eval 解析，解析失败，报错，则无法上传

01

网页加速特技之 AMP

据统计，40%的人会放弃使用加载时间超过3秒的网站。对于加载慢的页面我也是没耐心等待的，同类型网站那么多，为什么不选择加载速度更快体验更好的呢。

08

墨瞳漫画h5一期 vuejs总结

博主也是vuejs萌新，公司仅我一个前端，收到做h5的需求后，马上想到要用下vuejs，于是说服领导，开始慢慢钻研，现在记录一下踩到的坑。这些坑主要是在一些组件的使用上，其它的只要好好看官方文档就好了，vue，vue-router, vuex的文档相当重要。

01

25个经典Selenium自动化面试题，赶紧收藏

② 页面加载时间过慢，需要查找的元素程序已经完成，单页面还未加载，此时可以加载页面等待时间

03

HTML篇(003)-iframe 框架有那些优缺点？

答案：优点： iframe 能够原封不动的把嵌入的网页展现出来。如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。缺点：框架结构中出现各种滚动条 iframe 会阻塞主页面的 Onload 事件搜索引擎的检索程序无法解读这种页面，不利

01

前端学习(2)~html标签讲解(二)

英文单词：definition list，没有属性。dl的子元素只能是dt和dd。

01

页面弹出层组件layer的用法

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

02

前端性能监控

主要对 W3C 工作小组提出的各个草案和标准做了一些解读，各个草案的时间点，以及关注的内容等。

02

基于iframe的跨域与更新父窗体地址栏的解决方案

管理平台前端页面需要在当前前端框架结构基础上，在顶级导航中增加两个模块：首页、运维管理模块，以此接入运维平台提供的页面。在访问到内部某个页面后，希望父窗体的地址栏跟随子窗体内部src，同时更新父窗体的地址栏，再刷新页面可以保持在当前访问的页面，同时可以分享链接。

真正解决iframe高度自适应问题

拿到这个对象，就可以根据正常网页的方法拿到嵌入（子）网页的文档高度，然后把值附给父页面的iframe的height。

03

CSRF攻击与防御

跨站请求伪造（Cross-site request forgery）简称为 CSRF。这种攻击方式很奇特，它是伪造用户的请求发动攻击的，在 CSRF 攻击过程中，用户往往在不知情的情况下构造了网络请求。

04

见识了电信流氓插iframe+分析解决方案

这两天回了家从感觉浏览器行为有些怪异，有些熟悉的网页无故出现了额外的竖直滚动条，有时候是两个，有时候甚至到了3个！我是用的是chrome浏览器，像现在wp后台添加文章的页面就是有3个竖直滚动条的。

02

解决iframe高度自适应

iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。

04

Web Security 之 Clickjacking

在本节中，我们将解释什么是 clickjacking 点击劫持，并描述常见的点击劫持攻击示例，以及讨论如何防御这些攻击。

01

html网页详细代码「建议收藏」

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136151.html原文链接：https://javaforall.cn

04

点击劫持漏洞的学习及利用之自己制作页面过程

该文章首发于：奇安信攻防社区 https://forum.butian.net/share/436

01

Python爬虫：动态爬取QQ说说并生成词云，分析朋友状况

今天我们要做的事情是使用动态爬虫来爬取QQ空间的说说，并把这些内容存在txt中，然后读取出来生成云图，这样可以清晰的看出朋友的状况。

01

爬虫篇|动态爬取QQ说说并生成词云，分析朋友状况

今天我们要做的事情是使用动态爬虫来爬取QQ空间的说说，并把这些内容存在txt中，然后读取出来生成云图，这样可以清晰的看出朋友的状况。

01

一文带你响应式网页设计入门

在快速发展的互联网环境中，各种类型新硬件设备的推出令人目不暇接，如果在这过程里我们的网页能自动适配各设备不同的分辨率且能以比较出色的样式为用户呈现网页的话，那么将为你的业务提供至关重要的作用。

02

网页如何嵌套网页__HTML框架

通过使用html框架，可以在一个浏览器窗口中展示多个页面。也就是一个html文件中可以引入多个html文件。在网页中框架使用比较少，但我们还是需要了解下。

03

网页如何嵌套网页__HTML框架

通过使用html框架，可以在一个浏览器窗口中展示多个页面。也就是一个html文件中可以引入多个html文件。在网页中框架使用比较少，但我们还是需要了解下。

05

前端进程间通讯的渗透之术

父页面和子页面（iframe）处于2个不同的进程（即使在同一个域），进程之间的通讯必须通过每个进程内【事件监听所在的线程】来完成。最重要的是，通讯时传输的数据格式必须是序列化的格式，序列化格式指【一维】【线性】的数据类型比如字符串、字节流等，在浏览器中有这么几种序列化格式可选：

03

前端技术探索 - 你不知道的JS 沙箱隔离

自从 2014 年 HTML5 正式推荐标准发布以来，HTML5 增加了越来越多强大的特性和功能，而在这其中，工作线程（Web Worker）概念的推出让人眼前一亮，但未曾随之激起多大的浪花，并被在其随后工程侧的 Angular、Vue、React 等框架的「革命」浪潮所淹没。当然，我们总会偶然看过一些文章介绍，或出于学习的目的做过一些应用场景下的练习，甚或在实际项目中的涉及大量数据计算场景中真的使用过。但相信也有很多人和我一样茫然，找不到这种高大上的技术在实际项目场景中能有哪些能起到广泛作用的应用。

03

你不知道的JS 沙箱隔离

自从 2014 年 HTML5 正式推荐标准发布以来，HTML5 增加了越来越多强大的特性和功能，而在这其中，工作线程（Web Worker）概念的推出让人眼前一亮，但未曾随之激起多大的浪花，并被在其随后工程侧的 Angular、Vue、React 等框架的「革命」浪潮所淹没。当然，我们总会偶然看过一些文章介绍，或出于学习的目的做过一些应用场景下的练习，甚或在实际项目中的涉及大量数据计算场景中真的使用过。但相信也有很多人和我一样茫然，找不到这种高大上的技术在实际项目场景中能有哪些能起到广泛作用的应用。

04

打造轻量级可视化数据爬取工具-菩提

作者：jiaqiangwang，腾讯 IEG 后台开发工程师背景在大数据及机器学习日益火爆的今天，数据作为基石发挥了至关重要的作用。网页内容爬取作为数据的一个重要补充来源，数据爬取开发成了一个必不可少的工作。在业界，普遍的做法是采用 scrapy 等框架不断进行 case by case 的爬取代码编写，这种做法在需求量逐渐增大后会出现大量重复工作、大量针对某个网站或需求开发的特殊逻辑等，导致技术不能持续积累沉淀、开发耗时长、维护压力越来越大。我们在调研了业界最新动态后，决定开发一款轻量级

03

Selenium4+Python3系列（七） - Iframe、Select控件、交互式弹出框、执行JS、Cookie操作

二次管控：先定位select框，再定位select里的选项,通过Select对象进行强转，来调用select控件中的Api来达到操作的目的。

01

前端之 HTML 知识点扫盲

在HTML中，文档类型声明是必要的。所有的文档的头部，你都将会看到”DOCTYPE” 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。 “DOCTYPE” 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

04

一文看懂Chrome浏览器工作原理

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译，而是结合个人的理解将作者想表达的意思表达出来，而且会尽量补充一些相关的内容来帮助大家更好地理解。

03

iframe标签（页面嵌套）

上面两张图是两个不同的页面但是它们的基本框架都是一样，每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的，改变的是中间的内容。

01

自适应页面高度

困扰了我很久的问题：我很想让一个框架左侧的菜单（控件或者是折叠的LI或者别的），能够自动适应浏览器的变化。因为即使是同一分辨率，页面中的实际高度也不同。不过非常遗憾，网上的文章可谓无数，但基本都不能解决问题。基本上是这两类： 1、页面中嵌了IFrame，希望Iframe不出现滚动条，大小刚刚和页面大小一样，这个基本方法，都是用页面的document.body.scrollHeight属性来完成的。其实我也是用Iframe，因为我的折叠菜单是用css+div实现的，没法用滚动条，所有我

07

深入理解浏览器原理

导语：本文从市面主流的浏览器及相应的内核引擎开始，介绍了Chromium为代表的浏览器架构及Blink内核的功能架构。Chromium为多进程架构，用户从启动运行浏览器后，先后经过页面导航、渲染、资源加载、样式计算、布局、绘制、合成到栅格化，最后完成GPU展示。而页面渲染完成后，浏览器如何响应页面操作事件也进行了深入的介绍。良心推荐！本文第二至五部分内容根据 Mariko Kosaka 的英文原版《Inside look at modern web browser》(见参考文献)，进行翻译、理解

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭