最近項目中需要實現一個功能姻几,在app內打開第三方H5頁面,再回跳到app,發(fā)現被自己坑了一波鲜棠。有兩種方式:
- 原生實現肌厨。直接通過獲取本地地址,再替換成原生設定的格式后豁陆,將該鏈接直接傳給第三方H5頁面柑爸,直接通過window.location實現回跳,此時原生做攔截處理盒音,由原生實現打開該鏈接頁面(打開第三方頁面最好還是重開一個新webview表鳍,由原生生成頂部導航,否則頁面一旦出錯祥诽,會陷入進退不得的尷尬局面)譬圣。
- 第二種方法有點繞,實現流程:app頁面 --在iframe內打開 -- 第三方H5頁面(無法控制的雄坪,非我方的) --回跳--第三方頁面(我方的厘熟,處理跨域數據傳輸) -- 在原來的app頁面(監(jiān)聽跨域數據的變化),關閉iframe维哈;
// 在app頁面內生成iframe
var iframe = $('<iframe id="iframe_pop" style="width: 100%;height: 100%;position: fixed;top:0;left:0;z-index: 1000;" frameborder=0 marginheight=0 marginwidth=0 scrolling=no src=SRC></iframe>');
$("body").append(iframe);
// 在iframe內插入表單并提交
window.frames["iframe_pop"].contentWindow.document.body.innerHTML = "表單字符串";
$(window.frames["iframe_pop"].contentWindow.document.body).find("form").submit();
// 在我方的第三方頁面(即相對本地資源的服務器資源)
// targetWindow.postMessage(data, targetOrigin)
window.parent.postMessage(data, '*');
// 在app頁面內監(jiān)聽message
window.addEventListener('message',function(e){
$(window.frames["iframe_pop"]).remove();
var result = e.data;
},false);