嵌入内容

7.1 元素 <iframe>

在 HTML 中，<iframe> 元素用于在当前文档中嵌入另一个 HTML 文档。 这样可以在主文档内部显示其他网页的内容，创建集成各种资源的可能性，比如视频、地图、文档及其他网页。

<iframe> 元素创建一个内嵌框架，可以显示其他 HTML 文档。 这个文档可以从任何 URL 地址加载，并独立于主文档运行。

语法：

    
      <iframe src="URL"></iframe>
    
  

使用示例：

    
      <iframe src="https://www.example.com" width="600" height="400" title="iframe 示例"></iframe>
    
  

属性

• src: 将被加载到 <iframe> 中的文档的 URL 地址
• width: 框架的宽度（可以用像素或百分比表示）
• height: 框架的高度（可以用像素或百分比表示）
• title: 框架内容的简短描述（对无障碍性很重要）
• name: 框架的名称，可以用于链接和表单的目标定位
• sandbox: 为框架内容设置限制，提高安全性
• allow: 确定在 <iframe> 中可以使用哪些功能（例如，allowfullscreen 用于全屏模式）

7.2 属性 allowfullscreen

allowfullscreen 属性允许 <iframe> 中加载的内容启用全屏模式。 没有这个属性，内容不能进入全屏模式。

语法：

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

使用示例：

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

全屏模式允许用户以全屏模式观看视频或其他资源，提升用户体验。

7.3 属性 allow

allow 属性定义了哪些功能可以在 <iframe> 中使用，比如访问地理位置、摄像头、麦克风和全屏模式。

语法：

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

使用示例：

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

优势：

• 功能控制: 允许指定哪些功能和 API 可被嵌入内容使用
• 权限管理: 提供灵活性以管理对地理位置、摄像头等功能的访问

7.4 属性 sandbox

sandbox 属性用于对 <iframe> 中加载的内容应用限制。 它阻止执行某些操作，如执行脚本或打开弹出窗口，从而提高安全性。

语法：

    
      sandbox="allow-scripts allow-same-origin"
    
  

沙箱属性的值：

• allow-forms: 允许提交表单
• allow-modals: 允许使用模式窗口
• allow-orientation-lock: 允许锁定屏幕方向
• allow-pointer-lock: 允许捕获指针
• allow-popups: 允许打开弹出窗口
• allow-popups-to-escape-sandbox: 允许弹出窗口超出沙箱范围
• allow-presentation: 允许访问演示 API
• allow-same-origin: 允许来自相同来源的脚本执行
• allow-scripts: 允许执行脚本
• allow-storage-access-by-user-activation: 允许用户激活访问存储
• allow-top-navigation: 允许顶级导航
• allow-top-navigation-by-user-activation: 允许通过用户激活的顶级导航

使用示例：

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

优势：

• 安全性: 防止执行潜在的恶意脚本并限制嵌入内容的功能
• 访问控制: 让开发者精确指定嵌入内容允许的功能

7.5 属性 loading

loading 属性控制 <iframe> 的加载方式，允许在元素显示在屏幕上时再加载（懒加载）。

loading 属性的值：

• lazy: 推迟加载 <iframe> 直到元素可见
• eager: 不管元素是否可见，<iframe> 都会立即加载

语法：

    
      loading="状态"
    
  

使用示例：

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

优势：

• 性能优化: 懒加载减少加载的数据量，加快页面加载速度
• 资源利用降低: 仅加载用户真正看到和使用的元素