项目乱了真是麻烦😣,我需要在A域名下后台的项目中获取B域名下的项目h5的内部链接,第一时间想到的就是iframe,但是这样子的话我们只能获取到src的url,内部发生跳转就无法获取到跳转后的连接了,这时就需要h5进行配合了
思路
h5内部发生链接跳转之后就向后台进行通信发送跳转后的url
实现
- H5
因为H5是使用h5就行开发的,所以只需要监听相关跳转方法的执行就好了,我们可以使用uniapp提供的一个方法addInterceptor拦截器
主要的参数就是
invoke
: 拦截前触发
returnValue
: 方法调用后触发,处理返回值
我这里就直接在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()
方法用于发送消息给目标窗口。它接受两个参数:消息内容和目标窗口的源。在这里,window.location.href 作为消息内容,表示当前窗口的 URL 地址。
最后,"*" 是目标窗口的源参数。这里的 * 表示通配符,表示消息可以发送给任意源(即任意窗口)。
- 后台
我们在后台需要监听message事件即可
window.addEventListener('message', (value) => {
if (value.origin === 'xxxx') { // 这里来源进行判断
// value 就是对应的数据
}
})