動態(tài)獲取iframe內(nèi)部(uniapp)鏈接

項(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ù) 
  }
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容