iframe框架及优缺点

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

基本使用

  • src:规定在iframe中显示的文档的URL
  • frameborder:规定是否显示框架周围的边框。
  • scrolling:规定是否在 iframe 中显示滚动条。
  • width:规定iframe的宽度,建议使用CSS替代。
  • height:规定iframe的高度,建议使用CSS替代。
  • sandbox:启用一系列对iframe中内容的额外限制。
  • marginwidth:定义iframe的左侧和右侧的边距。
  • marginheight:定义iframe的顶部和底部的边距。
  • srcdoc:规定在iframe中显示的页面的HTML内容。
  • align:规定如何根据周围的元素来对齐此框架,建议使用样式替代。

使用场景

加载其他域的网页

<iframe>是允许跨域请求资源的,但是不能够修改,由此可以在网页中嵌套其他网页,如需要跨域通信的话,需要考虑document.domainwindow.namewindow.postMessage

典型系统结构

典型的系统结构,左侧是功能树,上部为个人信息,右侧就是实际功能,使用iframe将功能单独分离出来,当然也可以使用vuereact进行实现。

实现Ajax

可以使用iframe进行实现异步请求发送,来模拟Ajax的请求操作,Ajax的异步请求完成操作为XHR.readyState === 4执行callbackiframe使用iframe.onload执行callback,还可以实现一个轮询长连接。

加载广告

广告是与原文无关的,假如硬编码进去,会造成网页布局的紊乱,而且这样势必需要引入额外的cssjs文件,极大的降低了网页的安全性,使用iframe便可以解决这些问题。

提交表单

可以使用iframe提交表单来避免整个页面的刷新,还可以实现无刷新文件上传的操作。

优缺点

优点

  1. 可以跨域请求其他网站,并将网站完整展示出来
  2. 典型系统结构可以提高代码的复用性
  3. 创建一个全新的独立的宿主环境,可以隔离或者访问原生接口及对象
  4. 模块分离,若多个页面引用同一个iframe,则便于修改操作
  5. 实现广告展示的一个解决方案
  6. 若需要刷新iframe则只需要刷新框架内,不需要刷新整个页面

缺点

  1. iframes阻塞页面加载,影响网页加载速度,iframe加载完毕后才会触发window.onload事件,动态设置src可解决这个问题。
  2. 加载了新页面,增加了cssjs文件的请求,即额外增加了HTTP请求,增加了服务器负担。
  3. 有时iframe由于页面挤占空间的原因出现滚动条,造成布局混乱。
  4. 不利于SEO,搜索引擎的爬虫无法解读iframe的页面。
  5. 有些小型的移动设备如手机等无法完全显示框架,兼容性较差。
  6. iframe与主页面是共享链接池的,若iframe加载时用光了链接池,则会造成主页面加载阻塞。

参考

https://www.zhihu.com/question/20653055
https://www.cnblogs.com/hq233/p/9849939.html
https://blog.csdn.net/baxiadsy_csdn/article/details/86245809

iframe框架及优缺点的更多相关文章

  1. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  2. 当session过期后自动跳转到登陆页而且会跳出iframe框架

    写项目时在重定向后一直存在一个问题就是重定向后登陆页面会出现在跳出的子框架里.

  3. session失效后,登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  4. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  5. 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:

    移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...

  6. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  7. javascript_获取iframe框架中元素节点的属性值

    1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...

  8. iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

    来源于crm项目的contact/edit.html 一.背景是这样的 最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷 ...

  9. 在Iframe框架下如何跳转到登录界面

    在Iframe框架下跳转到登录界面总会跳到子界面中,类似于下图 试用Respon.Redirect()不行, 用Js函数,但我跳转代码都是写在cs文件中的,用Respose.write(),js函数根 ...

随机推荐

  1. 在JavaScript里的“对象字面量”是什么意思?

    字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量.字面量分为字符串字面量(string literal ).数组字面量(array literal)和对象字面量(ob ...

  2. Pip安装TensorFlow报错:MemoryError

    问题描述 使用pip安装TensorFlow时,一直报错,情况如下: 解决办法 使用如下命令可正常安装: pip3 install --no-cache-dir tenstoflow --no-cac ...

  3. Flutter混合开发:Android接入Flutter

    Flutter Google推出已经已经一年多了,单个 Flutter 项目的开发流程已经很成熟了.对与个人开发者来说使用 Flutter 开发一个跨平台的App挺有意思.但是对于现有的项目改造来说还 ...

  4. 查漏补缺:QT入门

    1.什么世QT Qt是一个跨平台的C++图形用户界面应用程序框架,为应用程序开发者提供建立艺术级图形界面所需的所有功能.它是完全面向对象的,容易扩展,并且允许真正的组建编程. 2.支持平台 Windo ...

  5. cssy元素居中的方法有哪些?

    css的元素居中 各位小伙伴们在努力写网页的时候有没有遇到过这样的一个问题呢? 在写的时候发现他不居中,可是要分分钟逼死强迫症的啊! 别急,我来啦 哈哈哈 今天就带来三种css的元素居中的方法 第一种 ...

  6. unittest实战(二):用例编写

    # coding:utf-8import unittestfrom selenium import webdriverimport timefrom ddt import ddt, data, unp ...

  7. 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 此视频是可 ...

  8. TCP/IP基础总结性学习(6)

    HTTP 首部 一. HTTP 报文首部 1.HTTP 报文的结构: 2.HTTP 请求报文 图示: 举例子: 3.HTTP 响应报文: 下面的示例是访问 http://hackr.jp 时,请求报文 ...

  9. RabbitMQ面试题集锦(精选)(另附思维导图)

    1.使用RabbitMQ有什么好处? 1.解耦,系统A在代码中直接调用系统B和系统C的代码,如果将来D系统接入,系统A还需要修改代码,过于麻烦! 2.异步,将消息写入消息队列,非必要的业务逻辑以异步的 ...

  10. mysql中实现更新数据+1,再次更新数据-1

    $sql="update article set comment=comment^1 where a_id=2"; 这条语句你会发现当你更新comment字段时为1,再次更新时为0 ...