使用Iframe实现内联嵌套

最新推荐文章于 2024-09-02 16:43:18 发布
原创 最新推荐文章于 2024-09-02 16:43:18 发布 · 895 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端iframe

本文介绍使用Iframe实现内联嵌套。开发需根据客户需求，确定是在主页面内联嵌套还是点击标签跳转新页面。在主页面预留显示区域，设置宽度高度，绑定嵌套跳转页面，还做了嵌套与直接跳转的效果对比。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用Iframe实现内联嵌套

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Iframe

作者：吴业华

撰写时间：2019年5月22号

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

搭页页面呢  我们首先要先很客户对应好 是搭主页面内联嵌套页面呢 还是点击标签跳转到一个新页面

这些都是根据客户的需求来做  那么在主页面上如何可以实现 点击标签可以嵌套其他的页面进来显示呢

首先我们在主页面处留有一片显示 iframe 嵌套页面的显示区域

然后就是：

接下来是设置宽度高度等等

然后给与需要嵌套页面绑定上 嵌套跳转

为了突出效果  做了一个对比 下面是直接跳转的

在主页面上 我们点击做了嵌套的标签  显示出来的是主页面和 被嵌套页面

该图是设置直接跳转的 会有一丢丢显示的单调了些许

前端开发：Vue中嵌套标签iframe的使用
全沾软贱开发攻城狮
10-20 1万+
前言 在前端开发过程中，往原有页面中嵌入新的页面的需求也是比较常见的需求操作，尤其是在比较复杂的必须要用嵌套的场景下。前端中使用嵌套的时候，需要用到的就是iframe标签，通过该标签可以规定一个内联框架，然后放入需要嵌套的新页面即可。本篇博文来分享一下关于iframe的使用方法，尤其是对于初级开发者来说尤为重要。 iframe 1、定义和使用 <iframe> 标签规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 2、使用说明 （1）可以把需要的文本放
Iframe实例
09-13
Frame可以在网页内嵌入另一个页面，类似“画中画”形式。 　　在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
iframe嵌套详解
欢迎欢迎
06-29 9890
通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。但是，有追求的我们，并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么
iframe框架一个页面中嵌套到另外一个页面
we
07-10 1万+
在一个页面中嵌套另外一个页面，就要使用到框架 标签。 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。基本语法： 举例： 运行浏览器后得到的效果如图 以上例子展示了的用法，在浏览器执行后，有个默认的高宽，让整个页面看起来不自然，还需要调整，所以接下来我们还要了解更多关于的属性。1、 标签的 frameborder 属性frameborder 属性规定是否显示 iframe...
从对象到iframe - 其他嵌入技术
m0_50414588的博客
10-25 278
到目前为止，您应该掌握了将图像、视频和音频嵌入到网页上的诀窍了。此刻，让我们继续深入学习，来看一些能让您在网页中嵌入各种内容类型的元素： , 和 元素。用于嵌入其他网页，另外两个元素则允许您嵌入PDF，SVG，甚至Flash — 一种正在被淘汰的技术，但您仍然会时不时的看到它。 预备知识： 基本的计算机知识，安装基础软件，文件处理 的基本知识，熟悉HTML基础知识（阅读 开始学习 HTML）以及本模块中以前的文章。 学习目标： 要了解如何使用、以及在网页中嵌入部件，例如Flash电影或其他网页。 嵌入的简
iframe和iframe实现页面内嵌套一个页面（jsp）
admin__istrator的博客
07-19 1万+
相信刚学习javaweb的同学都十分好奇页面上点击一个按钮下面就显示一个页面，点击不同的导航栏按钮，下方就会显示不同内容，这就用到了iframe标签的src属性。下面就给大家介绍一下iframe的使用及嵌套页面的实现 下面展示一些 内联代码片。 先给大家写一下嵌套页面的实现代码 <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="${pageContext.request.contextPath}/
使用iframe ，父页面调用嵌套页面的内容
水滴石穿！学习小积累！
12-28 231
iframe 父级页面 js 是  MyIframe.window.getId();    MyIframe是iframe的名字，window，可以理解为对象    嵌套的页面 js是  function getId() {   return "1";//这里就可以写你要的获取方法了 }...
实现iframe嵌套，适合CMS，CRM等后台框架
11-05
在IT行业中，iframe（内联框架）是一种常用于网页开发的技术，它允许在一个HTML文档中嵌入另一个HTML文档。在CMS（内容管理系统）和CRM（客户关系管理）等后台框架中，iframe的应用尤为广泛，因为它提供了多页面内容...
深入剖析HTML5 内联框架iFrame
01-19
所谓的iFrame内联框架，我的理解就是在网页内部嵌套一个网页，并且可以一级一级地嵌套下去。 示例如下： /* 示例由index.html和iframe1.html、iframe2.html、iframe3.html组成 */ 先上一张效果图，图片后面是完整...
iframe 多层嵌套 无限嵌套 高度自适应的解决方案
09-28
在网页开发中，有时我们需要使用`iframe`（内联框架）来嵌套不同的页面，以实现内容的分隔和组织。然而，当`iframe`进行多层嵌套时，特别是无限嵌套，如何保证每个`iframe`的高度都能自适应其内容，避免滚动条的出现...
[转载] iframe嵌入网页的用法
weixin_30756499的博客
08-22 317
iframe并不是很常用的，在标准的网页中非常少用。但是有朋友经常问到，下面我简单地介绍一下它的用法，你只要熟练掌握这些参数足矣。<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。我们举第一个例子，具体代码如：<iframe width=420 height=330 frameborder=0 scrolli...
iframe内联
学习随笔
04-08 308
iframe是什么？ 就是一个标签，dom元素。 有什么作用？ 网页嵌套网页；如：导航栏tab切换页、在线编辑器、广告植入。 历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案。 跨域通信等； iframe 优缺点？ iframe会阻塞页面加载；（页面阻塞）当一个页面的iframe标签过多时，会导致刷新图标一直转圈，给人一种迟迟没有加载好的感觉。因为window的onload事件只...
Cypress：操作iframe中的元素
简单随风的博客
08-30 3494
示例代码如下： 比如现在要点击"loginFrame"中的"J_Quick2Static"按钮 cy.get('#loginFrame',{timeout: 2000}) .then($iframe => { cy.wrap($iframe.contents().find("#J_Quick2Static")); ...
uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.
最新发布
收集、分享
09-02 1260
uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.
uniapp中使用iframe实现滑动刷视频
weixin_55688275的博客
04-24 934
用swiper包裹iframe也会有滑动不了的问题，看了其他文章，降低iframe层级可以解决，但问题是无法点击iframe播放按钮。所以直接 用view包裹iframe,在上层放置三块占位符并绑定触摸事件，通过触摸事件判断用户上滑还是下滑。用户上滑下滑后，需要关闭上一个或下一个音频，先将iframe的src赋值为空，然后再重新赋值。一开始考虑到webview，但是webview不能滑动，不好控制。由于video只能展示MP4格式视频，有时还要展示外链。
uniapp使用iframe内嵌html并实现相互通信
dyt1_1的博客
03-25 5064
uniapp使用iframe内嵌网页，并实现相互通信
uniapp使用iframe标签实现iframe高度自适应
weixin_44326167的博客
04-28 1万+
百度良久试了好多方法都不行。无奈只能用iframe引入这个文件，引入后发现高度只有50%。可以添加一段代码，实现iframe高度自适应。 <iframe id="iframe_id" src="./static/map.html" frameborde
uniapp中使用iframe时利用renderjs通讯的解决方案
weixin_43860852的博客
06-17 5412
uniapp中使用iframe时利用renderjs通讯，子传父和父传子。
多种方案教你实现iframe嵌套页面相互传参(父子通信)
热门推荐
tangdou369098655的博客
06-30 3万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
iframe标签 内联框架
07-28
内联框架是一种HTML标签，用于在网页中嵌入其他外部页面。它使用<iframe>标签来创建，并具有一些属性来指定引入的页面的路径、宽度、高度和名称。\[2\] 通过使用<iframe>标签的src属性，可以指定要引入的外部页面的路径。可以使用相对路径来引用页面。\[2\] 此外，还可以使用width和height属性来指定内联框架的宽度和高度。\[2\] 另外，可以为内联框架指定一个name属性，以便在其他链接中使用target属性来指定使用该内联框架进行跳转。\[2\] 与内联框架类似的还有框架集（frameset），它可以同时引入多个页面。在HTML5标准中，推荐使用框架集而不是内联框架。\[1\] 框架集使用<frameset>标签来创建，并具有rows和cols属性来指定框架集中的框架的排列方式。\[1\] rows属性用于指定框架集中的框架按行排列，而cols属性用于指定框架集中的框架按列排列。\[1\] 可以在框架集中嵌套其他框架集。\[1\] 需要注意的是，无论是内联框架还是框架集，它们引入的页面内容都不会被搜索引擎检索到。因此，如果搜索引擎检索到的页面是一个框架页，它无法判断框架内的内容。\[3\] 使用框架集意味着页面中不能有自己的内容，只能引入其他的页面。然而，每次加载一个页面都需要重新发送一次请求，这会影响用户的体验。因此，如果必须使用框架，建议使用框架集而不是内联框架。\[1\] #### 引用[.reference_title] - *1* *3* [HTML-iframe内联框架和frameset框架集详解](https://blog.youkuaiyun.com/weixin_64933233/article/details/127964261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [iframe内联框架](https://blog.youkuaiyun.com/m0_53132067/article/details/125858173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值