iframe标签详解

iframe

<iframe>标签生成一个指定区域,在该区域中嵌入其他网页 。它是一个容器元素,如果浏览器不支持<iframe>,就会显示内部的子元素。

HTML 复制代码
<iframe src="https://www.example.com"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.example.com">点击打开嵌入页面</a></p>
</iframe>

<iframe>的属性如下:

  • allowfullscreen:允许嵌入的网页全屏显示,需要全屏 API 的支持,请参考相关的 JavaScript 教程。
  • frameborder:是否绘制边框,0为不绘制,1为绘制(默认值)。建议尽量少用这个属性,而是在 CSS 里面设置样式。
  • src:嵌入的网页的 URL。
  • width:显示区域的宽度。
  • height:显示区域的高度。
  • sandbox:设置嵌入的网页的权限,详见下文。
  • importance:浏览器下载嵌入的网页的优先级,可以设置三个值。high表示高优先级,low表示低优先级,auto表示由浏览器自行决定。
  • name:内嵌窗口的名称,可以用于<a><form><base>target属性。
  • referrerpolicy:请求嵌入网页时,HTTP 请求的Referer字段的设置。参见<a>标签的介绍。

sandbox 属性

嵌入的网页默认具有正常权限,比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面,你不了解对方会执行什么操作,因此就存在安全风险。为了限制<iframe>的风险,HTML提供了sandbox属性,允许设置嵌入的网页的权限,等同于一个隔离层。

sandbox可以当作布尔属性使用,表示打开所有限制。

HTML 复制代码
<iframe src="https://www.example.com" sandbox></iframe>

sandbox属性可以设置具体的值,表示逐项打开限制。 未设置某一项,就表示不具有该权限。

  • allow-forms:允许提交表单。
  • allow-modals:允许提示框,即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。
  • allow-popups:允许嵌入的网页使用window.open()方法弹出窗口。
  • allow-popups-to-escape-sandbox:允许弹出窗口不受沙箱的限制。
  • allow-orientation-lock:允许嵌入的网页用脚本锁定屏幕的方向,即横屏或竖屏。
  • allow-pointer-lock:允许嵌入的网页使用 Pointer Lock API,锁定鼠标的移动。
  • allow-presentation:允许嵌入的网页使用 Presentation API。
  • allow-same-origin:不打开该项限制,将使得所有加载的网页都视为跨域。
  • allow-scripts:允许嵌入的网页运行脚本(但不创建弹出窗口)。
  • allow-storage-access-by-user-activationsandbox属性同时设置了这个值和allow-same-origin的情况下,允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求,经由 Storage Access API 访问父窗口的 Cookie。
  • allow-top-navigation:允许嵌入的网页对顶级窗口进行导航。
  • allow-top-navigation-by-user-activation:允许嵌入的网页对顶级窗口进行导航,但必须由用户激活。
  • allow-downloads-without-user-activation:允许在没有用户激活的情况下,嵌入的网页启动下载。

loading属性

<iframe>指定的网页会立即加载,但我们有时候想让指定的网页进入视图后加载,而loading属性就是用来做这个操作的。

**loading属性可以触发<iframe>网页的懒加载。**该属性可以取以下三个值。

  • auto:浏览器的默认行为,与不使用loading属性效果相同。
  • lazy<iframe>的懒加载,即将滚动进入视口时开始加载。
  • eager:立即加载资源,无论在页面上的位置如何。
HTML 复制代码
<iframe src="https://example.com" loading="lazy"></iframe>

如果<iframe>是隐藏的,则loading属性无效,将会立即加载。

浏览器就会认为<iframe>是隐藏的条件:

  • <iframe>的宽度和高度为4像素或更小。
  • 样式设为display: nonevisibility: hidden
  • 使用定位坐标为负X或负Y,将<iframe>放置在屏幕外。

iframe 的优缺点

iframe 之所以这么容易被忽视,其中一个很大的原因就是它产生的一些缺点问题。这里整理了部分 iframe 的优缺点。

优点:

  • 可以减少数据的传输,减少网页的加载时间
  • 使用起来很方便
  • 方便开发,减少代码的重复率

缺点:

  • 部分使用会产生跨域
  • 会产生很多的页面,不易于管理
  • 浏览器的后退按钮无效
相关推荐
JerryXZR4 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香6 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596939 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai14 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91523 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼1 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦7 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子7 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js