以子页面与父页面的完美配合展示信息的奇妙传值之旅

2023-10-12 17:32:03

在现代网络开发中，iframe标签的使用非常普遍。它允许您将一个网页嵌入另一个网页中，从而实现许多有用的功能，例如在父页面中显示第三方内容、创建模块化布局或实现跨域通信。但是，在使用iframe时，经常会遇到一个问题：如何在子页面与父页面之间传递数据。

同域情况

在同域情况下，即子页面和父页面属于同一个域，可以通过以下方法传递数据：

1. 相互获取DOM元素

这种方法最简单，但只能在子页面和父页面都位于同一个域的情况下使用。

// 在父页面中获取子页面中的元素
const childElement = document.getElementById('child-element');

// 在子页面中获取父页面中的元素
const parentElement = window.parent.document.getElementById('parent-element');

2. window.name

window.name属性允许您在页面之间存储和检索数据。

// 在父页面中设置子页面的window.name属性
window.frames[0].name = 'child-page';

// 在子页面中获取父页面的window.name属性
const parentPageName = window.parent.name;

3. window.location

window.location属性允许您在页面之间传递数据，但只能传递字符串。

// 在父页面中设置子页面的window.location属性
window.frames[0].location = 'https://example.com/child-page?data=hello';

// 在子页面中获取父页面的window.location属性
const parentPageLocation = window.parent.location;

跨域情况

在跨域情况下，即子页面和父页面不属于同一个域，可以通过以下方法传递数据：

1. postMessage

postMessage方法允许您在不同来源的页面之间发送消息。

// 在父页面中向子页面发送消息
window.frames[0].postMessage('hello', 'https://example.com');

// 在子页面中监听父页面的消息
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    console.log(event.data);
  }
});

2. window.postMessage

window.postMessage方法与postMessage方法类似，但它只允许您向父页面发送消息。

// 在子页面中向父页面发送消息
window.parent.postMessage('hello', '*');

// 在父页面中监听子页面的消息
window.addEventListener('message', (event) => {
  console.log(event.data);
});

3. JSONP

JSONP是一种利用<script>标签来实现跨域通信的技术。

// 在父页面中创建`<script>`标签
const script = document.createElement('script');
script.src = 'https://example.com/jsonp.php?callback=myCallback';

// 在子页面中定义回调函数
function myCallback(data) {
  console.log(data);
}

// 在父页面中将`<script>`标签添加到文档中
document.body.appendChild(script);