iframe嵌套与postMessage传值

在Web开发中，iframe嵌套和postMessage传值是两个常用的技术，它们各自具有独特的用途和优势。本文将对这两项技术进行详细解析，并通过实例展示其使用方法。

一、iframe嵌套

1. 什么是iframe嵌套？
   iframe嵌套是指在HTML页面中通过 iframe标签嵌入另一个独立的HTML文档。这种技术常用于嵌入第三方内容、显示外部网页或集成不同的前端应用。

2. iframe嵌套的优势
   内容隔离：iframe中的内容与宿主页面相互独立，避免样式和脚本冲突。
   复用性高：可以重复使用同一个iframe嵌入多个页面，减少重复开发。
   第三方集成：方便集成第三方服务和内容。

3. iframe嵌套的缺点
   性能开销：iframe会增加页面的加载时间和内存消耗。
   跨域问题：由于浏览器的同源策略，iframe嵌套的页面在跨域时会遇到限制。
   SEO不友好：搜索引擎对iframe内容的索引有限，可能影响SEO效果。

4. 在Vue中使用iframe
   在Vue应用中，可以通过以下步骤使用iframe：
   创建一个通用的iframe组件，方便在多个地方复用。
   在父组件中使用iframe组件，通过传递不同的src属性嵌入不同的页面。
   可以使用JavaScript动态调整iframe的高度，以适应嵌入内容的高度。

二、postMessage传值

1. 什么是postMessage传值？
   postMessage是一种在不同执行上下文（如不同源的页面）间传递信息的能力。它允许父页面和iframe页面之间进行双向通信。

2. postMessage的基本用法
   发送消息：使用window.postMessage(message, targetOrigin, [transfer])方法发送消息。
   message：要传输的数据，推荐使用字符串格式，其他格式的浏览器兼容性不好。如果要传输结构化数据，可以通过JSON.stringify处理，接收时用JSON.parse转换回来。
   targetOrigin：指明目标窗口的源，可以是*（表示无限制）或者一个URI。
   [transfer]：可选，是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方。
   接收消息：使用window.addEventListener(‘message’, function(event) {})监听消息事件。
   event.data：接收到的数据。
   event.origin：发送消息的文档源，用来验证数据源。
   event.source：消息源，消息的发送窗口/iframe。

3. 示例
   假设有两个页面：A页面为父页面，B页面为iframe页面。
   A页面

<div><iframe id="child" src="https://www.example.com?query=your_query" frameborder="0"></iframe>
</div>
<script>// 接收消息window.addEventListener("message", function(e) {if (e.origin == "https://www.example.com") {console.log("Received message:", e.data);}});// 发送消息到iframedocument.getElementById('child').contentWindow.postMessage("Hello from parent", "*");
</script>

B页面（子页面）

<script>// 接收父页面发送的消息window.addEventListener('message', function(event) {console.log("Received message from parent:", event.data);// 发送消息回父页面window.parent.postMessage("Hello from iframe", "*");});
</script>

4. 注意事项
   发送和接收消息时，要验证消息的来源，确保数据的安全性。
   如果要传输结构化数据，建议使用JSON格式。
   跨域通信时，可能会受到浏览器的同源策略限制，需要配置CORS或使用代理服务器。

• 获取访问来源
  子页面是无法直接获取到iframe的信息的，可以通过判断父页面传过来的src参数来确定访问来源，如下

function getQueryParams(url) {url = url || window.location.href;const queryString = url.split('?')[1];if (!queryString) {return {};}const pairs = queryString.split('&');const params = {};pairs.forEach(pair => {const [key, value] = pair.split('=');params[decodeURIComponent(key)] = decodeURIComponent(value || '');})return params;
}// 调用函数，看与实际参数是否一致
getQueryParams()['query'] === 'your_query'

• 控制台查看打印信息
  在父页面查看打印信息，注意在控制台选择层级关系 top
  三、总结
  不同页面有各自的传值与监听传值，在实际开发中，要注意性能优化、跨域处理和安全性验证等问题，以确保应用的稳定性和安全性。