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

895 阅读1分钟

我们项目组在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;
} ())
`

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