正文

揭秘JS高效获取父页面tbody数据的五大技巧

/0 浏览量
0324

在Web开发中，经常需要从父页面获取子页面（iframe或嵌套页面）中的数据，尤其是当子页面包含表格数据时。以下是五种高效获取父页面tbody数据的技巧，帮助开发者节省时间和提高代码效率。

技巧一：使用window.postMessage

window.postMessage 是一个安全的方式来在父子页面之间传递消息。这种方法不需要共享任何全局变量，也不需要担心跨域问题。

示例代码：

// 子页面
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://parent.com') {
    return;
  }
  const tbodyData = document.querySelector('tbody').innerHTML;
  event.source.postMessage(tbodyData, event.origin);
});

// 父页面
window.addEventListener('message', function(event) {
  if (event.origin === 'http://child.com') {
    console.log('Received data:', event.data);
  }
});

技巧二：使用window.opener

如果子页面是通过window.open方法打开的，那么它可以通过window.opener属性与父页面通信。

示例代码：

// 子页面
window.opener.postMessage(document.querySelector('tbody').innerHTML, '*');

// 父页面
window.addEventListener('message', function(event) {
  if (event.origin === 'http://child.com') {
    console.log('Received data:', event.data);
  }
});

技巧三：使用document.referrer

document.referrer 属性可以获取创建当前页面的URL，这可以用来验证请求是否来自父页面。

示例代码：

// 子页面
if (document.referrer.startsWith('http://parent.com')) {
  const tbodyData = document.querySelector('tbody').innerHTML;
  console.log('Referrer is valid:', document.referrer);
  // 这里可以执行发送数据的操作
}

// 父页面
// 无需额外操作，因为子页面会处理

技巧四：使用window.parent

如果子页面是作为iframe嵌入的，可以使用window.parent来直接访问父页面的全局变量或函数。

示例代码：

// 子页面
window.parent.getDataFromChild(document.querySelector('tbody').innerHTML);

// 父页面
function getDataFromChild(data) {
  console.log('Received data:', data);
}

技巧五：使用XMLHttpRequest

对于更复杂的数据传输需求，可以使用XMLHttpRequest来发送异步请求。

示例代码：

// 子页面
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://parent.com/data-receiver', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ tbodyData: document.querySelector('tbody').innerHTML }));

// 父页面
// 在父页面的服务器端接收数据，并处理

通过以上五种技巧，开发者可以根据实际需求选择最合适的方法来获取父页面tbody数据。每种方法都有其适用的场景和限制，了解这些技巧可以帮助开发者更高效地解决问题。

-- 展开阅读全文 --