当前位置:首页 > Web开发 > 正文

当url发生变化的时候

2024-03-31 Web开发

封装好了WebView,下面来使用它。Nav里面每个图标点击会跳转到H5的页面。
跳转需要用到Navigator来push一个页面。然后里面使用MaterialPageRoute,

技术图片


导入WebVIew这个widget

技术图片



技术图片

运行测试

点击

技术图片



技术图片


点击左侧的按钮可以返回。

技术图片


点击返回,并没有返回到我们的首页,而是打开了此外一个H5页面

技术图片



这个H5页面是携程的首页

技术图片


怎么规避这个问题呢?接下俩就需要扩展我们的WebView来和H5之间进行一个混合。
在我们webView页面加载指定的url的时候。native做一些操纵来规避让它不加载这个url。
当url产生变革的时候,在OnStateChanged会收到监听。

技术图片


判断如果是跳转写成的首页或者是其他的H5页面,就不让他跳转,而是返回到我们的首页。

在顶部配置一些白名单。包罗了携程可能呈现的一些域名。

技术图片


技术图片

供给一个要领来判断

在dart里面判断一个object存不存在的要领。问号+点:?.
当我们的url存在的时候,才能用endsWith否则走的是false

技术图片


如果是false或者不存在的情况下,,直接设置为false

技术图片



技术图片




技术图片



技术图片


flutter里面返回到上一页 通过pop要领。

技术图片



加一个是否返回的状态。默认是没有返回的

技术图片


返回到首页后,就设置为true

技术图片


让Navigator不反复返回。

技术图片

运行测试

点击返回并没有返回到我们的首页。

技术图片


代码报错

技术图片



技术图片




技术图片


告成返回

技术图片

总结

如果禁制返回,就是不允许webview打开其他页面,只允许打开它自身。

技术图片

结束

9-10【H5混合实战】基于自界说WebView实现H5混合开发-3

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31458.html