最近项目中需要实现一个功能,在app内打开第三方H5页面,再回跳到app,发现被自己坑了一波。有两种方式:
- 原生实现。直接通过获取本地地址,再替换成原生设定的格式后,将该链接直接传给第三方H5页面,直接通过window.location实现回跳,此时原生做拦截处理,由原生实现打开该链接页面(打开第三方页面最好还是重开一个新webview,由原生生成顶部导航,否则页面一旦出错,会陷入进退不得的尴尬局面)。
- 第二种方法有点绕,实现流程:app页面 --在iframe内打开 -- 第三方H5页面(无法控制的,非我方的) --回跳--第三方页面(我方的,处理跨域数据传输) -- 在原来的app页面(监听跨域数据的变化),关闭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页面内监听message
window.addEventListener('message',function(e){
$(window.frames["iframe_pop"]).remove();
var result = e.data;
},false);