iframe标签使用及优劣

最新推荐文章于 2024-05-08 11:07:51 发布
最新推荐文章于 2024-05-08 11:07:51 发布
阅读量858 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43201629/article/details/104039044
版权

iframe里面的子页面html内容变化时，如何自适应页面高度？

		//自适应高度  在子页面中编写
        function IFrameResize() {
            var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象
            obj.height = this.document.body.scrollHeight-2; //调整父页面中IFrame的高度为此页面的高度  正常获取还是有右侧滚动条 -2(因滚动距离不是很长故-2即可)是为了把右侧滚动条取消掉
        }
        在iframe的子页面的body中，添加onload事件
		<body onload="IFrameResize()">
	
		<ul class="nav nav-pills nav-stacked">
                <li class="nav-item active">
                    <a class="nav-link" href="/admin/welcome" target="mainFrame">首页</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="/***" target="mainFrame">***</a>
                </li>
                ***
        </ul >      
		  为父页面的iframe标签添加id，即子页面  IFrameResize() 函数中要获得的id
		  iframe标签中的name要与 要跳转的a标签的target一致 不同a标签的href值会自动刷新到iframe标签中的src值
		<iframe border=0 marginWidth=0 name="mainFrame"
                    frameSpacing=0 marginHeight=0 
                    src="/admin/index" frameBorder=0
                    noResize scrolling="no" width=100% height=100% vspale="0" id
最低0.47元/天 解锁文章
souldistance
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe 异步加载技术及性能分析
12-04
这是一篇原创翻译文章。原文地址。 我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly: iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池 阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。 那么为了
iframe的用法及优劣处
wu_dada的博客
10-23 374
1、Iframe 参数详解： border 设定围绕图文框的边缘宽度 frameborder 设置边框是不否为3维（0=否，1=是） height,width 设质边框的宽度和高度 scrolling 是否有滚动条（YES,NO,AUTO) src 2、优劣处： 1）优点： A. iframe能够原封不动的把嵌入的网页展现出来。
iframe的替代方案有吗？做页面嵌套界面套娃
最新发布
qq_69807227的博客
05-08 996
与iframe和微前端相比，UIOTOS在表现上有类似的嵌套聚合效果，但采用了独创的嵌套继承技术，让页面实现真正融合，页面和组件不再有区分，并且开箱即用，无需任何代码。与Vue前端框架相比，都支持增量化开发、一切都是组件，UIOTOS从完全无代码的层面，以特有的页面嵌套、属性继承和节点编程，实现跟代码开发趋于等同的效果。快速原型设计：因为无需编译，蓝图的修改可以即时预览，大大加快了从概念到可玩原型的迭代速度。，通过连线来代替脚本逻辑开发，复杂的交互界面，通过页面嵌套轻松解决，是个很新颖的思路，前端零代码！
谈IFRAME标签的使用作用及技巧
shendeguang的专栏
11-10 2604
纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？ 　　答案很肯定：应用Iframe标记！ 　　一、Iframe标记的使用 　　提起
iframe 性能与利弊
热门推荐
　 ~8挑、Mm的专栏
07-10 1万+
本文转自:http://www.webjx.com/html-xhtml/webxhtml-15650.html 原文如下: 使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能：   使用 iframe 的页面通常没有
iframe的优缺点、使用
m0_51221372的博客
04-24 1072
iframe的优缺点、使用
Android WebView拦截iframe标签内部跳转教程
08-19
在我们的示例代码中，我们使用了下面的代码来实现 iframe 标签内部的跳转拦截： ```java webView.setWebChromeClient(new WebChromeClient(){ @Override public boolean onCreateWindow(WebView webView, boolean ...
关于解决iframe标签嵌套问题的解决方法
11-21
问题描述 当我们使用easyui做后台管理系统的时候，会使用tree组件来实现树形菜单，而我们每点击一次相应菜单，会根据是否有url来判断是否是一级菜单，以及是否...如果为否，我们就会嵌套一个iframe标签来打开一个相应的
iframe的使用用法
10-31
iframe 的使用用法 在 HTML 中，iframe 是一个非常重要的标签，它允许我们在网页中嵌入另一个 HTML 文档，从而实现更加复杂的网页布局。下面我们来详细介绍 iframe 的使用用法。 一、iframe 的基本使用 首先，...
符合W3C网页标准的iframe标签的使用方法
10-30
符合W3C网页标准的iframe标签的使用方法
iframe加载方案及性能
lamanchas的博客
11-09 7427
普通方法加载iframe/在onload之后加载iframe/setTimeout来加载iframe/友好型iframe加载。 我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行加载，不会阻塞主页面。
iframe标签的使用及优缺点
lz的博客
03-11 2173
1、 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 2、优点缺点 优点：1、支持任何浏览器 2、原封不动的把嵌入的网页展现出来 3、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度 缺点：1、页面复杂度高，不容易管理 2、页面加载速度相对frame较慢...
使用iframe的好处与坏处详细比拼
weixin_30706507的博客
01-23 344
一、使用iframe的坏处 1.搜索引擎的蜘蛛不会识别在iframe中被调用的图片、文本、url等内容的，因为该内容不属于该页面，只是访问的时候被临时的调用，而且在SEO建议中也有提到：“frame/frameset/iframee标签,会导致百度spider的抓取困难,建议不要使用”这样更能证明其弊! 2.虽然使用iframe标签有它的好处，但是在页面中不是使用越多就越好，...
iframe的优缺点
虞公子的博客
06-14 316
iframe的优点： 1.iframe能够原封不动的把嵌入的网页展现出来。 2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。 3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。 4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。 iframe的缺点： 1.会产生很多页面，不容易管理。 2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话
前端面试基础题：iframe缺点有哪些？
sdasadasds的博客
07-28 1223
3.iframe是会阻塞页面的加载的，会影响到网页的加载速度。比如window的onload事件会在页面或者图像加载完成后立即执行，但是如果当前页面当中用了iframe了，那还需要把所有的iframe当中的元素加载完毕才会执行，这样就会让用户感觉网页加载速度特别慢，影响体验感。4.代码复杂，不利于seo，现在的搜索引擎还不能很好的处理iframe当中的内容。1.在一个页面中如果利用iframe嵌入了多个别的页面，不利于我们的管理。iframe类似于框架，可以在一个页面中嵌入别的页面。...
html难记知识点-4
qq_57999968的博客
08-02 281
html
前端自测题目查缺补漏3
weixin_52310583的博客
04-06 412
1.页面渲染过程中遇见js文件怎么办js文件的加载会阻塞cssom、dom的构建也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加defer或者async属性defer：defer等待dom加载完毕再执行js脚本。async脚本会在后台加载，并在加载就绪时运行。
前端面试题(4)iframe有哪些优点？iframe缺点是什么？
mrchengzp的博客
10-26 7313
优点： iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。 缺点： iframe会阻
iframe嵌套页面加载慢_Chrome 现已支持延迟加载网页中的 iframe，速度翻倍提升
weixin_39617113的博客
12-01 2671
谷歌曾在 Chrome 76 中添加了对图片的延迟加载支持。近日，ChromeEng 经理 Addy Osmani 则宣布，该团队已将 iframe 的延迟加载作为标准功能，添加至了 Chrome 浏览器和 Chromium 浏览器中。该功能会延迟窗口外 iframe 的加载，直到用户将网页滚动到附近为止。此举可以节省数据、加快页面其他部分的加载速度，并减少内存使用量。Chrome 小组的研究表明...
iframe标签怎么使用
07-28
iframe标签用于在网页中嵌入另一个网页或文档。以下是使用iframe标签的基本步骤： 1. 在HTML文件中，使用iframe标签来创建一个嵌入框架。示例代码如下： ```html <iframe src="URL地址"></iframe> ``` 2. 在`src`属性中指定要嵌入的网页或文档的URL地址。例如，你可以使用一个外部网页的URL或者相对于当前页面的相对路径。 ```html <iframe src="https://www.example.com"></iframe> ``` 3. 可选地，你可以设置iframe的其他属性，例如宽度、高度、边框等。 ```html <iframe src="https://www.example.com" width="500" height="300" frameborder="0"></iframe> ``` 其中，`width`和`height`属性用于设置iframe的宽度和高度（以像素为单位），`frameborder`属性用于设置是否显示iframe周围的边框。设置为`0`表示不显示边框。 4. 保存并运行HTML文件，你将在指定位置看到嵌入的网页或文档。 请注意，由于浏览器的安全性限制，某些网站可能不允许在iframe中嵌入其内容。此外，使用iframe时要注意保护用户隐私和防止跨站脚本攻击等安全问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值