項目亂了真是麻煩??,我需要在A域名下后臺的項目中獲取B域名下的項目h5的內(nèi)部鏈接时甚,第一時間想到的就是iframe,但是這樣子的話我們只能獲取到src的url,內(nèi)部發(fā)生跳轉就無法獲取到跳轉后的連接了路捧,這時就需要h5進行配合了
思路
h5內(nèi)部發(fā)生鏈接跳轉之后就向后臺進行通信發(fā)送跳轉后的url
實現(xiàn)
- H5
因為H5是使用h5就行開發(fā)的,所以只需要監(jiān)聽相關跳轉方法的執(zhí)行就好了传黄,我們可以使用uniapp提供的一個方法addInterceptor攔截器
主要的參數(shù)就是
invoke
: 攔截前觸發(fā)
returnValue
: 方法調用后觸發(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
引用了當前窗口的父級窗口對象。通過這個對象膘掰,可以與包含當前窗口的父級窗口進行通信
postMessage()
方法用于發(fā)送消息給目標窗口章姓。它接受兩個參數(shù):消息內(nèi)容和目標窗口的源。在這里识埋,window.location.href 作為消息內(nèi)容凡伊,表示當前窗口的 URL 地址。
最后窒舟,"*" 是目標窗口的源參數(shù)系忙。這里的 * 表示通配符,表示消息可以發(fā)送給任意源(即任意窗口)辜纲。
- 后臺
我們在后臺需要監(jiān)聽message事件即可
window.addEventListener('message', (value) => {
if (value.origin === 'xxxx') { // 這里來源進行判斷
// value 就是對應的數(shù)據(jù)
}
})