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

最近项目中需要实现一个功能,在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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,138评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,273评论 4 61
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,176评论 8 184
  • 一只毛球狗出门 打理好毛发 拖着稚嫩的灵魂 一路上跌跌撞撞 微笑示人 毛孔内沾染上灰尘 还是继续赶路啊 莫辜负...
    宵夜窝窝头阅读 188评论 0 1
  • 个人年总结目的: 这一年我做了什么?还需要做什么才能向目标靠近呢? 明天做年度总结,回头没准还可以出个小流程呢,把...
    会儿儿儿儿儿阅读 247评论 2 2