实现在app内打开第三方H5页面再回跳

最近项目中需要实现一个功能,在app内打开第三方H5页面,再回跳到app,发现被自己坑了一波。有两种方式:

  • 原生实现。直接通过获取本地地址,再替换成原生设定的格式后,将该链接直接传给第三方H5页面,直接通过window.location实现回跳,此时原生做拦截处理,由原生实现打开该链接页面(打开第三方页面最好还是重开一个新webview,由原生生成顶部导航,否则页面一旦出错,会陷入进退不得的尴尬局面)。
  • 第二种方法有点绕,实现流程:app页面 --在iframe内打开 -- 第三方H5页面(无法控制的,非我方的) --回跳--第三方页面(我方的,处理跨域数据传输) -- 在原来的app页面(监听跨域数据的变化),关闭iframe;
// 在app页面内生成iframe
var 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);

你可能感兴趣的:(实现在app内打开第三方H5页面再回跳)