误用Flutter写了个病毒网页的我
原创误用Flutter写了个病毒网页的我
原创
缘起
前几日,boss让我做个五彩斑斓黑风格的h5，好家伙，我打算直接用Flutter给他梭哈前端，很帅啊，但悲剧的是误打误撞写了个病毒网页，我giao～～～，大意了?♂️
事发现场
大家应该都在手机浏览器上遇到过那种，怎么都返回不掉，并且疯狂弹窗的毒瘤广告网页吧？
我误打误撞写出来的东西就是这玩意，不过并没有广告弹窗，只是用户永远返回不了上一页～
先来个正大光明的围观地址（ 放心，无毒无害，已处理?
https://flutter-1255480117.cos.ap-shanghai.myqcloud.com/demo1/index.html
事后分析
用Flutter写过网页的同学都晓得，当首页加载完毕后Flutter会动态在当前网页地址的后面加上'#/'，我现在的需求是当网页地址被加上小尾巴时，动态去给他remove掉，防止用户分享的网页地址出错。
然后，之前我看到有个 vue 路由跳转的例子是这样动态改变当前网页地址的：
window.history.pushState(null, null, 'index.html');好家伙，我直接拿来做了个死循环去动态监听当前网页地址有没有变小尾巴
（因为我不知道Flutter何时会修改网页地址，也不确定它会修改几次）
//获取当前网页地址
function getUrl() {
return window.location.href.replace('#/','');
}
//修改网页地址
function changeUrl() {
window.history.pushState(null, null, getUrl());//替换当前网页路径
}
//监控网页地址
function moniterUrl() {
setTimeout(function () {
let path = window.location.href;
if (path.endsWith('#/')) {
changeUrl();
moniterUrl(); //考虑到Flutter会动态修改地址，仍然需要监控地址，为了不影响性能，每秒检测10次
} else {
moniterUrl();//等待注入
}
}, 1 * 100);
}
moniterUrl();//开始监控网页地址结果可想而知，只要你点击返回上一页，它立马在0.1秒内给你push到index.html下一页
造成的结果就是你始终无法退出当前页面！（要你是单身20年的手速，那当我没说?）
我去，这不是误打误撞写了个超级坑人的病毒网页嘛，
这要是上线了，怕不是要饭碗不保了
汗～～～
解决方法
冷静下来，一瞅，发现问题还是出在路由跳转上
window.history.pushState(null, null, 'index.html');这里的 window.history.pushState() 方法，从字面意义上就知道它是把当前网页历史push到了下一页，其实我只需要replace一下当前的网页地址就好了。
//修改网页地址
function changeUrl() {
window.history.replaceState(null, null, getUrl());//替换当前网页路径
}OK，这样就修好了，完美！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
