iframe 的基本介绍与使用

一、介绍

iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。

二、语法

<iframe> 标签的基本用法如下：

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

属性介绍

属性	描述
src	指定要在 iframe 中显示的文档的 URL
srcdoc	在 iframe 中嵌入 HTML 代码而不是外部文档
name	为 iframe 定义一个名称
allow	允许特定功能的列表，如 fullscreen，geolocation 等
allowfullscreen	指定是否允许在 iframe 中使用全屏模式
allowpaymentrequest	指定是否允许在 iframe 中进行支付请求
allowtransparency	指定 iframe 是否可以是透明的
class	为 iframe 定义一个或多个类名
style	定义 iframe 的 CSS 样式
frameborder	指定是否在 iframe 周围显示边框
width	指定 iframe 的宽度
height	指定 iframe 的高度
importance	指定 iframe 对页面内容的重要性
loading	指定 iframe 加载时的行为
referrerpolicy	指定如何发送 referer HTTP 标头
sandbox	启用 iframe 的沙盒模式，提高安全性，IE10+支持
title	为 iframe 定义一个标题
scrolling	指定 iframe 的滚动条，yes / no / auto

三、获取 iframe 里的内容

1、contentWindow & contentDocument

这两个 API 只是 DOM 节点提供的方式( 即 getELement 系列对象 )

let iframe = document.getElementById('demo');
// 获取 iframe 的 window 对象
let iwindow = iframe.contentWindow; 
// 获取 iframe 的 document 对象
let idoc = iframe.contentDocument; 

2、通过 iframe 的 name 属性 调用 iframe。

let iframe = window.frames['demo']
// 返回的就是 window 对象

3、在同域下，父页面可以获取子 iframe 的内容，子 iframe 同样也能操作父页面内容

// 获取上一级的 window 对象，如果还是 iframe 则是该 iframe 的 window 对象
window.parent 　 
// 获取最顶级容器的 window 对象，即，就是你打开页面的文档
window.top 
// 返回自身 window 的引用，可以理解 window === window.self　　  
window.self 　　 

4、跨域通讯之 postMessage

 postMessage ( message, targetOrigin )

message：就是传递给 iframe 的内容, 通常是 string,

targetOrigin：“目标域“。URI（包括：协议、主机地址、端口号）

• 若指定为”*“，则表示可以传递给任意窗口；
• 指定为”/“，则表示和当前窗口为同源窗口；
• 当为 URI 时，如果目标窗口的协议、主机地址或端口号这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会发送

注意：可以将  targetOrigin 设置为“ * ” 号以匹配所有路径，但可能会有安全风险。谨慎使用。

<iframe src="http://jj.com" name="sendMessage"></iframe>

// 页面 A 
let ifr = window.frames['sendMessage'];
//使用 iframe 的 window 向 iframe 发送 message
ifr.postmessage('hello I'm a ', "http://jj.com");

// 页面 B 监听 message 事件
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://jj.com') {
        if (e.data == 'give u a message') {
            // 向原网页返回信息
            e.source.postMessage('hello I'm b', e.origin);  
        } else {
            alert(e.data);
        }
    }
}

当 targetOrigin 接受到 message 消息之后，会触发 message 事件。 message 提供的 event 对象上有3个重要的属性

• data：postMessage 传递进来的值
• ​origin：发送消息的文档所在的域
• source：发送消息文档的 window 对象的代理，如果是来自同一个域，则该对象就是window，可以使用其所有方法，如果是不同的域，则 window 只能调用 postMessage() 方法返回信息

四、使用场景

iframe主要用途有嵌入其他网页、嵌入多媒体内容、创建广告位、加载外部内容等等。

• 嵌入其他网页

最常见的用途是在一个网页中嵌入另一个网页的内容。这样可以将不同的网页组合在一起，使用户可以在一个页面中浏览多个相关的内容。例如，在一个新闻网站上，可以使用 iframe 将相关的新闻文章嵌入到一个页面中，使用户可以方便地在同一个页面上浏览不同的新闻。

• 嵌入多媒体内容

除了网页，iframe 还可以用于嵌入多媒体内容，如视频或音频。通过将视频或音频文件的 URL 嵌入到 iframe 中，可以在网页上直接播放这些媒体内容。这种方式可以提供更好的用户体验，因为用户无需离开当前页面就可以观看视频或听音乐。

• 创建广告位

iframe 还可以用于创建广告位。广告商可以将他们的广告内容嵌入到一个 iframe 中，然后将这个 iframe 嵌入到其他网站的页面中。这样，当用户访问这些网站时，他们将看到嵌入的广告内容。这种方式对于广告商来说非常方便，因为他们只需要提供一个 iframe 代码，而不需要与每个网站单独合作。

• 加载外部内容

有时候，网页需要加载来自其他网站的内容。例如，一个网页可能需要显示来自社交媒体平台的最新帖子或来自其他网站的实时数据。通过使用 iframe，可以在网页中加载这些外部内容，并将其显示给用户，这种方式可以使网页更加丰富和动态。