項(xiàng)目亂了真是麻煩??,我需要在A域名下后臺的項(xiàng)目中獲取B域名下的項(xiàng)目h5的內(nèi)部鏈接,第一時間想到的就是iframe,但是這樣子的話我們只能獲取到src的url,內(nèi)部發(fā)生跳轉(zhuǎn)就無法獲取到跳轉(zhuǎn)后的連接了,這時就需要h5進(jìn)行配合了
思路
h5內(nèi)部發(fā)生鏈接跳轉(zhuǎn)之后就向后臺進(jìn)行通信發(fā)送跳轉(zhuǎn)后的url
實(shí)現(xiàn)
- H5
因?yàn)镠5是使用h5就行開發(fā)的,所以只需要監(jiān)聽相關(guān)跳轉(zhuǎn)方法的執(zhí)行就好了,我們可以使用uniapp提供的一個方法addInterceptor攔截器
主要的參數(shù)就是
invoke: 攔截前觸發(fā)
returnValue: 方法調(diào)用后觸發(fā),處理返回值
我這里就直接在returnValue里面做了
const routerMethods = [
"navigateTo",
"redirectTo",
"reLaunch",
"switchTab",
"navigateBack",
];
for (const method of routerMethods) {
uni.addInterceptor(method, {
returnValue(){
window.parent.postMessage(window.location.href, "*");
return true;
}
});
}
window.parent引用了當(dāng)前窗口的父級窗口對象。通過這個對象,可以與包含當(dāng)前窗口的父級窗口進(jìn)行通信
postMessage()方法用于發(fā)送消息給目標(biāo)窗口。它接受兩個參數(shù):消息內(nèi)容和目標(biāo)窗口的源。在這里,window.location.href 作為消息內(nèi)容,表示當(dāng)前窗口的 URL 地址。
最后,"*" 是目標(biāo)窗口的源參數(shù)。這里的 * 表示通配符,表示消息可以發(fā)送給任意源(即任意窗口)。
- 后臺
我們在后臺需要監(jiān)聽message事件即可
window.addEventListener('message', (value) => {
if (value.origin === 'xxxx') { // 這里來源進(jìn)行判斷
// value 就是對應(yīng)的數(shù)據(jù)
}
})