react-native webview内嵌 vue或者react网页,连续操作时,如何返回到网页原先的浏览位置...

我们项目组在APP编写过程中,遇到个问题:我们接入了某A购物团平台的商品数据到本网,然后使用vue写了个页面B放置这些数据,点击就跳转到A平台的网页或者APP购买,遇到一个问题:当没安装A这个APP时,在跳转到A平台网页后返回到B网页时,如何返回到本来的浏览位置。其实这个'返回技术'已经很成熟了,保存浏览位置和加载页数到cookie或者localstorage,写个通用函数就行了。
但是我们用了另一种方法,结合我们已有的功能,我们决定结合postMessage来实现一个比较骚的操作:
1.禁止掉商品a标签的默认跳转功能。
2.将组合的参数通过window.postMessage(url)传达到webview,webview再根据参数跳转到app, 如果失败,就跳转到网页。 如果是跳转到网页,我们就会重新打开一个webview,因此,回退的时候,是通过app的路由进行回退,不涉及网页的回退,自然不会更新网页。
相关代码如下:

<a href="javascript:open();">商品信息</a>
复制代码

其中open函数如下:

let urlParams = '{"type":"opennativeapp", "data":{"appschema":"'+ alink.native_url+'"}, "failed":{"type":"openurl", "data":{"url":"'+ alink.url+'"}}}';
window.postMessage(url);
复制代码

tips:
可通过webview的 injectedJavaScript 属性注入一段代码(injectedJavaScript={BaseScript}),如以下代码就在网页端增加了一个全局变量param == 1:

const BaseScript = `
(function () {
	window.param = 1;
} ())
`
复制代码

总觉得写的不够完善,以后再补充。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值