跨域页面传参_window.open加将token作为url参数传给新页面

URL传参

优点：可以携带参数收藏B页面为浏览器书签

缺点：通过URL的方式传参有字符限制，只能传递较少的数据，而且暴露在URL上

// A页面
window.location.href = 'http://b.com?token=123&userName=用户名' // 在当前页打开
window.open('http://b.com?token=123&userName=用户名') // 在新窗口打开
1
2
3

// B页面
function getParams(key) {
    const query = window.location.search.slice(1)
	const params = query.split('&')
    for (let i = 0; i < params.length; i++) {
        let item = params[i].split("=")
        if(item[0] == key) return item[1]
    }
    return ''
}
getParams(token) // 123
getParams(userName) // 用户名
1
2
3
4
5
6
7
8
9
10
11
12

window.name

优点：window.name 容量很大，可以放置非常长的字符串

缺点：无法携带参数保存为B页面浏览器书签

// A页面
window.open('http://b.com','123456') // 在新窗口打开

// 在当前页打开
window.name =  '123456'
window.location.href = 'https://www.baidu.com'
1
2
3
4
5
6

// B页面
console.log(window.name) // 123456
1
2

postMessage

// A页面
const page = window.open('http://b.com')
page.postMessage('123456', 'http://b.com')

// 如果使用iframe
const iframe = document.getElementById('myIFrame').contentWindow // 或者iframe的contentWindow
iframe.postMessage('myIFrame', 'http://b.com')
1
2
3
4
5
6
7

// B页面
window.addEventListener('message', (e) => {
    if(e.origin !== 'http://a.com') return
    onsole.log(e.data) // 123456
})
1
2
3
4
5

cookie共享（同域）

// A页面（https://a.xxx.com）
document.cookie = 'token=123456;domain=.xxx.com;path=/'
document.cookie = 'userName=用户名;domain=.xxx.com;path=/'
window.location.href = 'https://b.xxx.com'
1
2
3
4

// B页面（https://b.xxx.com）
getCookie(name) {
    const arr = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`))
    if (arr != null) return arr[2]
    return null
}
getCookie(token) // 123456
getCookie(userName) // 用户名
1
2
3
4
5
6
7
8