前端页面之间数据交互方式汇总

720 阅读1分钟

1、URL 附带参数(支持跨域)

window.open('https://www.baidu.com?id=test')

2、全局变量(不支持跨域)

在父级或顶级浏览器上下文的 window 对象中声明全局变量,则所有子页面都能访问到该变量;

window.parent.id = 'test'
window.top.id = 'test'

3、通过 iframe 元素(不支持跨域)

通过 DOM 获取到 iframe 元素,进而获取相关数据;

// 只要能够获取到iframe元素,即可以通过contentWindow.document或者contentDocument方法获取到相应是 document 对象
document.getElementById('iframeId').contentWindow.document 
// IE8-不支持
document.getElementById('iframeId').contentDocument  
window.frames["iframeId"]

4、cookie(支持跨域)

document.cookie

5、localStorage、sessionStorage(不支持跨域)

6、postMessage(支持跨域)

const iframeWin = document.getElementById('iframeId').contentWindow

iframeWin.addEventListener('message', event => {
  console.log('接收到的数据:', event.data)
})

iframeWin.postMessage('test')

注意:postMessage 运行传递字符串和对象格式参数,其中传递的对象参数必须是标准的 JSON 格式类型,否则会报错