首页 > 其他 > 详细

<iframe> 标签

时间:2020-08-31 15:02:19      阅读:61      评论:0      收藏:0      [点我收藏+]

作者使用场景(需求):在注册页面,pdf协议放在model框中显示;

            <Modal v-model="Agreement" width="700" :mask-closable="false">
              <div class="iframeContent">
                <iframe
                  :src="selectAgreement === 0 ? ‘./static/doc/用户协议.pdf‘ : ‘./static/doc/用户数据授权使用协议.pdf‘"
                  width="100%" height="100%"
                  scrolling="no"></iframe>
              </div>
              <div slot="footer" class="footerButton">
                <Button type="primary" size="large" @click="handleAgreement">确定</Button>
              </div>
            </Modal>

 

页面显示状态:

技术分享图片

 

 

 

 

浅谈iframe的优缺点及应用场景

一、使用iframe的优缺点

优点: 

1.iframe能够把嵌入的网页原样展现出来;

2.模块分离,便于更改,如果有多个网页引用iframe,只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷;

3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,增加代码的可重用;

4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决;

5.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页;

6.方便制作导航栏。

 

缺点: 

1.样式和脚本需要额外链入,调用外部页面,需要额外调用css,增加页面额外的请求次数,增加服务器的http请求;

2.代码复杂,在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面,会影响搜索引擎优化,不利于网站排名;

3.框架结构有时会让人感到迷惑,滚动条除了会挤占有限的页面空间外会使iframe布局混乱,还会分散访问者的注意力,影响用户体验;

4.链接导航疑问。运用框架结构时,必须保证正确配置所有的导航链接,否则,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下访问者便被陷住了,因为此时他没有其他地点可去; 

5.产生多个页面,不易管理;

6.多数小型的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

二、为什么尽量少用iframe

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。

使用iframe的页面一般不会包含太多iframe,所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload事件以及连接池(connection pool),即iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池,会影响页面的并行加载。

1.iframes阻塞页面加载,影响网页加载速度

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload事件加载延迟后,它给用户的感觉就是这个网页非常慢。

window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发,就会影响网页加载速度。通过 JavaScript 动态设置 iframe的SRC可以避免这种阻塞情况。

2.唯一的连接池

对每个 web 服务器来说,浏览器只打开极少的几个连接数。老的浏览器,包括 IE 6/7 和 Firefox 2,每个主机只有2个连接。在新的浏览器中,连接数增加鸟。Safari 3+和Opera 9+增至4个,Chrome 1+、IE 8及Firefox 3增至6个。

在大多数浏览器中,连接被主页面和它的 iframe所共享,这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载。如果iframe中的内容同等重要,或比主页面更重要,这很好。然而在通常情况下iframe中的内容对页面来说不太重要,iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给iframe的src赋值。

总之,iframe会给你的页面性能带来冲击,尽可能不使用iframe,当确实需要时,谨慎地使用他们。目前框架的优点可以使用Ajax实现,这在某种角度也是一种替代方案。

三、iframe的一些应用场景

iframe的页面和父页面(parent)是分开的,所以它意味着,这是一个独立的区域,不受 parent的CSS或者全局的JavaScript的影响。

1.典型的,比如所见即所得的网页编辑器;

2.跨域通信。JavaScript跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放;

3.历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代;

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换;

5.用iframe实现无刷新文件上传,在FormData不可用时作为替代方案;

6.创建一个全新的独立的宿主环境。iframe还可以用于创建新的宿主环境,用于隔离或者访问原始接口及对象,比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用,通过创建一个iframe,然后从iframe中取回原始对象和方法来破解这种防范;

7.用来加载广告,例如联盟广告;

8.一般邮箱使用iframe,如QQ邮箱;

9.一些简单的后台页面。

关于iframe在跨域的使用,这里稍微强调一下

首先,我们要了解什么是跨域。简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。网络上已经有非常多可行的方案,我们只限定在iframe中去讲解几种跨域方案。

1、document.domain+iframe的设置

document.domain,这是浏览器暴露出来的一个准只读属性(之所以说它是准只读属性,是因为它可以设置为当前域名的超级域),利用这个特性,可以实现主域名相同子域名不同的网页实现通信。

2.使用HTML5 postMessage

HTML5提供的API,可以安全的启用跨域通信。

语法:targetWindow.postMessage(data, targetOrigin),data参数是指要传递的数据。

如何在目标窗口接收到数据呢?编写如下代码即可:

window.addEventListener(‘message‘, function(evt) {

console.log(evt.data);

}, false);

evt.data即是postMessage中传递过来的数据。

特别注意两点

1.如果是协议和端口造成的跨域问题“前台”是无能为力的。

2.在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

 

转载地址: http://www.miuu.club/Blog/articles/id/46.html

 

<iframe> 标签

原文:https://www.cnblogs.com/queenDream/p/13589444.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!