父页面监听iframe路由变化

对于前端路由应该都很熟悉了，开发过spa应用的应该都用过，只是很少人去查一下前端路由实现的原理。

前端路由的实现核心问题有两个，一个是改变url不刷新，另一个是监听url变化。主要靠的就是hash和history两个方式。

先看看hash，hash属性是url的锚部分，从#开始的部分，以前很多时候用来页面的锚点导航。hash改变，页面不会刷新。js也提供了hashchange事件用来监听urlhash的变化。

先看个效果：

代码：

<a href="#home">home</a>
<a href="#about">about</a>
<div id="app"></div>window.addEventListener('hashchange', onHashChange);
onHashChange();
function onHashChange() {let router = document.getElementById('app');router.innerText = location.hash;
}

很简单，监听hash变化，然后做相应的操作。有一点要注意，通过浏览器前进后退、a标签、location这几种情况改变 url的hash 都会触发 hashchange 事件。还有，因为刷新hash是不变的，必须立马执行一次方法，一般监听DOMContentLoaded的时候去执行，我这边是直接执行了。

history实现就比较复杂一些，history提供了pushState和replaceState两个api，通过这两个方法改变url不会刷新页面。但是监听url变化的事件popstate，只能是浏览器前进后退。所以我们要通过其他方法实现监听。

效果：

代码：

<a href="/home">home</a>
<a href="/about">about</a>
<div id="app"></div>window.addEventListener('popstate', popState);
var router = document.getElementById('app');
popState();
var aList = document.querySelectorAll('a[href]');
for(let i = 0;i < aList.length;i++){aList[i].addEventListener('click', function (ev) {ev.preventDefault();history.pushState(null, '', aList[i].getAttribute('href'))popState();})
}
function popState() {router.innerText = location.pathname;
}

pushState换成replaceState效果是一样的。这边通过监听a标签的点击事件，然后阻止默认事件实现a标签的路由。

其实前端路由实现的原理很简单，只是要结合不同技术去拓展。

父页面监听iframe路由变化_前端路由原理相关推荐

reactrouter监听路由变化_前端路由三种模式
hash:任何情况下都可以做前端路由,缺点是SEO不友好(服务器收不到hash,浏览器是不会把#后面的内容发给服务器) history模式:后端将所有前端路由都渲染到同一个页面(不能是404页面),缺 ...
HTML父页面监听子页面关闭并回调方法
1.方式一:父页面监听父页面中: //此处省略新窗口的设置参数var win = window.open("url", "name", "featu ...
vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
java监听变量的变化_[Java学习小记]使用PropertyChangeSupport来监听变量的变化
最近开始要着手写一个web项目 ,之前没怎么写过Java ,所以觉得蛮有必要把每天学习到的一些知识点或者解决的一些问题给记录下来 .一来供自己在整理过程中掌握巩固,二来也为以后再次出现该问题时能快速 ...
js监听select值变化_网络编程——C++实现socket通信(TCP)高并发之select模式
相关函数: 服务端: socket() bind() listen() FD_ZERO()等辅助函数 select() 高并发select模式 accept() read() 或 recv()等 wr ...
vue watch 监听不到变化_关于vue中watch检测到不到对象属性的变化的解决方法
前言在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 update age with 25 e ...
reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...
监听localStorage变化（同页面监听）
"当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发" 同页面监听,重写localStorage的方法,抛出自定义事件: &l ...
如何监听URL的变化？
文章转自: https://juejin.im/post/5c2708cd6fb9a049f06a5744 如何监听URL的变化? 单页应用的原理从早起的根据url的hash变化,到根据H5的hist ...

父页面监听iframe路由变化_前端路由原理

父页面监听iframe路由变化_前端路由原理相关推荐

最新文章

热门文章