HTML`iframe`标签

前端小工
485 阅读4分钟

🏠 返回首页

了解使用HTML`iframe`标签的基本知识

iframe 标签允许我们将来自其他来源（其他网站）的内容嵌入到我们的网页中。

从技术上讲，iframe创建了一个新的嵌套浏览环境。这意味着iframe中的任何内容都不会干扰到父页面，反之亦然。JavaScript和CSS不会 "泄漏 "到/从iframes中。

许多网站使用iframes来执行各种任务。你可能熟悉Codepen、Glitch或其他网站，它们允许你在页面的一个部分进行编码，并在一个框中看到结果。这就是一个iframe。

你可以用这种方式创建一个。

<iframe src="page.html"></iframe>

你也可以加载一个绝对的URL。

<iframe src="https://site.com/page.html"></iframe>

你可以设置一组宽度和高度参数（或使用CSS设置），否则iframe将使用默认值，即一个300x150像素的盒子。

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

srcdoc 属性让你指定一些要显示的内联HTML。这是一个替代src ，但是最近的，在Edge 18和更低的版本以及IE中不支持。

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

沙盒

sandbox 属性允许我们限制iframes中允许的操作。

如果我们省略它，一切都被允许。

<iframe src="page.html"></iframe>

如果我们把它设置为""，则什么都不允许。

<iframe src="page.html" sandbox=""></iframe>

我们可以通过在sandbox 属性中添加选项来选择要允许的内容。你可以通过在中间加一个空格来允许多个选项。下面是一个你可以使用的选项的不完整列表。

  • allow-forms: 允许提交表单
  • allow-modals 允许打开模态窗口，包括在JavaScript中调用alert()
  • allow-orientation-lock 允许锁定屏幕方向
  • allow-popups 允许弹出窗口，使用 和 链接window.open() target="_blank"
  • allow-same-origin 将正在加载的资源视为同一来源
  • allow-scripts 允许加载的iframe运行脚本（但不创建弹出窗口）。
  • allow-top-navigation 给予顶级浏览环境对iframe的访问权

允许

目前是实验性的，只有基于Chromium的浏览器支持，这是在父窗口和iframe之间共享资源的未来。

它类似于sandbox 属性，但让我们允许特定的功能，包括。

  • accelerometer 允许访问传感器API加速计接口
  • ambient-light-sensor 允许访问传感器API的环境光传感器（AmbientLightSensor）接口
  • autoplay 允许自动播放视频和音频文件
  • camera 允许从getUserMedia API访问摄像头
  • display-capture 允许使用getDisplayMedia API访问屏幕内容
  • fullscreen 允许访问全屏模式
  • geolocation 允许访问地理定位API
  • gyroscope 允许访问传感器API的陀螺仪接口
  • magnetometer 允许访问传感器API磁力计接口
  • microphone 允许使用getUserMedia API访问设备的麦克风
  • midi 允许访问Web MIDI API
  • payment 允许访问支付请求API
  • speaker 允许访问通过设备扬声器播放音频
  • usb 允许访问WebUSB API。
  • vibrate 允许访问振动API
  • vr 允许访问WebVR API

推荐人

当加载一个iframe时，浏览器会在Referer 头部发送关于谁在加载它的重要信息（注意单r ，一个我们必须接受的错字）。

referrer的拼写错误源于计算机科学家Phillip Hallam-Baker将该字段纳入HTTP规范的最初提议。这个错误的拼写在它被纳入RFC1945标准文件的时候就已经定型了。

referrerpolicy 属性让我们设置在加载iframe时向其发送的referrer。referrer是一个HTTP头，让页面知道谁在加载它。这些是允许的值。

  • no-referrer-when-downgrade 这是默认值，当当前页面通过HTTPS加载而iframe通过HTTP协议加载时，会发送referrer。
  • no-referrer 不发送referrer头
  • origin 发送referrer头，但只包含来源（端口、协议、域），而不是默认的来源+路径
  • origin-when-cross-origin 当在iframe中从同一来源（端口、协议、域）加载时，referrer以其完整的形式被发送（来源+路径）。否则只发送原点
  • same-origin 仅当在iframe中从同一来源（端口、协议、域）加载时，发送referrer。
  • strict-origin 如果当前页面是通过HTTPS加载的，并且iframe也是通过HTTPS协议加载的，则发送起源作为referrer。如果该框架是通过HTTP加载的，则不发送任何信息
  • strict-origin-when-cross-origin 当在同一来源上工作时，发送起源+路径作为referrer。如果当前页面是通过HTTPS加载的，并且iframe也是通过HTTPS协议加载的，则发送原点作为referrer。如果iframe是通过HTTP加载的，则不发送任何信息。
  • unsafe-url发送原点+路径作为推荐人，即使是在从HTTP加载资源而当前页面通过HTTPS加载时也是如此。
avatar
文章
阅读
粉丝