在前端开发中，从一个页面携带参数跳转到另一个页面是比较常见的一个业务场景，按照跳转目标页面的不同类型，该场景可分为两类：同源页面跳转与跨域页面跳转。其中，同源页面跳转方式简单且多样，这里不再赘述，这里主要介绍跨域页面跳转的几种方式与实践。

1.GET请求携带参数方式跳转。
        首先最常见、最方便的方式就是通过GET请求进行跳转了。在源页面将所要携带的参数拼接到请求的URL上，在目标页面加载时解析URL链接，获取携带的参数，即可完成需求。

window.open(url, "_black")

        这种方式虽然简单，但存在一个问题无法解决：不同的浏览器都限制了URL的长度，若所携带的参数过多将导致无法通过该方式进行页面跳转。

2.window.postMessage()方式跳转。
有别于第一种方式，这里将跳转与携带参数分为两个动作，先打开目标页面窗口，然后通过postMessage()方法传递参数。这种方式有两个关键点需要注意：
（1）需要确保目标页面窗口打开后才能通过postMessage方法传递参数。因此，在实际项目开发中，我们需要在源页面设置一个监听器message、一次postMessage()调用，目标页面设置message与load两个监听器、一次postMessage()调用。其中，源页面的监听器message监听目标页面是否加载完成的信号flag，一旦加载完成即调用postMessage向目标页面传递参数param；目标页面第一个监听器load监听本页面是否加载完成，若加载完成即调用postMessage向源页面传递加载完成信号flag，第二个监听器message则一直监听源页面传递的参数param。

源页面

// 先打开目标页面窗口
let targetWindow = window.open(targetUrl, "_black")
window.addEventListener('message', (e) => {
    // 确保监听到目标页面加载完成的信号后再传递参数
    if (e.origin == targetUrl && e.data == 'true') {
        targetWindow.postMessage(param, targetUrl)
    }
})

目标页面

// 目标页面加载完成后向源页面传递信号
window.addEventListener('load', () => {
    window.opener.postMessage('true', sourceUrl)
})
// 监听源页面传递的参数
window.addEventListener('message', handleFunction)

（2）源页面、目标页面需要将步骤（1）创建的监听器销毁。

// eg
window.removeEventListener('message', handleFunction)

验证不可行的方式：
form表单post提交方式：使用Nginx转发时post请求转换为get请求；浏览器不支持获取post请求参数