为什么在Iframe中不能使用Vue-Router

1.场景

在进行开发过程中,直接使用了Vue-Router来进行页面跳转,但是出现了一些奇奇怪怪的bug,特花时间来进行相关调研并记录,如有不严谨或不正确的地方,欢迎指正探讨。

问题

使用Vue-Router来进行页面跳转

使用this.$router.push() 地址栏的链接不变,Iframe的src不变,但是Iframe的内容发生变化。

使用this.$router.go(-1) 来进行跳转,地址栏链接改变,Iframe的src改变,Iframe的内容也发生变化。

使用this.$router.href()可以进行跳转,且地址栏发生改变

2.路由处理

说到路由跳转就不得不提Window.history 系列的Api了,常见的Vue-router等路由处理其本质也都是在通过该系列Api来进行页面切换操作。

本次我们讨论的就主要涉及 到Window.history.pushStateWindow.history.go

Window.history(下文将直接简称为history)指向一个History对象,表示当前窗口的浏览历史,History对象保存了当前窗口访问过的所有页面网址。

2.1History常见属性与方法

go() 接受一个整数为参数,移动到该整数指定的页面,比如history.go(1)相当于history.forward(),history.go(-1)相当于history.back(),history.go(0)相当于刷新当前页面

back() 移动到上一个访问页面,等同于浏览器的后退键,常见的返回上一页就可以用back(),是从浏览器缓存中加载,而不是重新要求服务器发送新的网页

forward() 移动到下一个访问页面,等同于浏览器的前进键

pushState() pushState()需要三个参数:一个状态对象(state),一个标题(title)和一个URL。

*注意:pushState会改变url,但是并不会刷新页面,也就是说地址栏的url会被改变,但是页面仍保持当前。

总之,pushState()方法不会触发页面刷新,只是导致 History 对象发生变化,地址栏会有反应。

history.pushState({a:1},'page 2','2.html')

popState事件

每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。简单可以理解为,每次我们需要修改url 那么必定是先出发了popState事件,浏览器的地址栏随后才会发生改变。

注意,仅仅调用pushState()方法或replaceState()方法 ,并不会触发该事件,**只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。**另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

2.2Vue-Router的实现

为什么在Iframe中不能使用Vue-Routermode

  
  #push src/history/html5.js 

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      pushState(cleanPath(this.base + route.fullPath))
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

function pushState (url, replace) {
    saveScrollPosition();
    // try...catch the pushState call to get around Safari
    // DOM Exception 18 where it limits to 100 pushState calls
    var history = window.history;
    try {
      if (replace) {
        // preserve existing history state as it could be overriden by the user
        var stateCopy = extend({}, history.state);
        stateCopy.key = getStateKey();
        history.replaceState(stateCopy, '', url);
      } else {
        history.pushState({ key: setStateKey(genStateKey()) }, '', url);
      }
    } catch (e) {
      window.location[replace ? 'replace' : 'assign'](url);
    }
  }

#go src/history/html5.js 
  go (n: number) {
    window.history.go(n)
  }

以上是Vue-router再history模式下push和go的源码,可见其主要的实现是通过History Api来实现跳转的。

2.3Vue-Router是如何实现单页应用的呢?

vue-router 主要用来做单页面,即更改 url 无需刷新能够渲染部分组件达到渲染不同页面的效果,其中 history 模式监听 url 的变化的也是由 popstate 实现的,然后监听浏览器返回的方法也是大同小异。

原理是,A url-> B url,此时用户点击返回时,url 先回退到 A url,此时触发 popstate 回调,vuerouter 根据 next 回调传参是 false 判断需要修成 A url 成 B url,此时需要将进行 pushstate(B url),则此时就实现了阻止浏览器回退的效果

Ps:篇幅原因,源码在文章底部附上。

那么在进行了Iframe嵌套后会有什么不一样呢?

3.IFrame嵌套情况下问题解决

The sequence of Documents in a browsing context is its session history. Each browsing context, including child browsing contexts, has a distinct session history. A browsing context's session history consists of a flat list of session history entries.

Each Document object in a browsing context's session history is associated with a unique History object which must all model the same underlying session history.

The history getter steps are to return this's associated Document's History instance.

-https://html.spec.whatwg.org/multipage/history.html#joint-session-history

简单来说不同的documents在创建的时候都有自己的history ,同时内部的document在进行初始化时候具有相同的基础HIstory。

为什么在Iframe中不能使用Vue-Router

如上,当我们从页面A进行跳转以后,Top层,和内嵌Iframe层初始时是具有相同的history,因此,当我们进入页面后,无论是在页面B 还是页面C中使用window.history.go(-1)均可以实现相同的效果,即返回页面A,且浏览器的URl栏也会随之发生改变。

当我们从hybrid页面跳向hybrid的时候

为什么在Iframe中不能使用Vue-Router

如下,此时如果在新的页面内使用go(-1),则可能会出现问题【当页面A和页面B的History不一致时】,但是除了我们手动去pushState改变,大部分情况页面A和页面B的history是完全一致的因此也就不会出现History不一致的问题了。

那么来看一下我们一开始遇到的问题:

注意:以下仅仅针对Chrome浏览器,不同浏览器对于Iframe中的HIstory Api处理方式可能会存在不一样。

1.使用this.$router.push() 地址栏的链接不变,Iframe的src不变,但是Iframe的内容发生变化。

2.使用this.$router.go(-1) 来进行跳转,地址栏链接改变,Iframe的src改变,Iframe的内容也发生变化。

3.使用this.$router.href()可以进行跳转,且地址栏发生改变

1.直接调用Router.push 相当于我们在Iframe中调用了pushState,但是由于pushState是不会主动触发popstate的,所以外层的popstate是没有被触发,因此外层的url并无改变,但是内层由于VueRouter通过对pushState的callBack事件来进行的后续操作,因此可以实现对popState事件的触发,从而实现了在将新的url push到history中以后,并进行了页面的跳转。

2.使用this.$router(-1) 可以实现跳转的原因在于,在我们进入一个hybrid页面的时候,iframe的history会被初始化和window完全相同,也就是说,这个时候我们在Iframe中执行window.go(-1)取到的url 是和直接在Top执行Window。所以这个时候执行Router.go(-1)是可以正常运行且返回上一个页面的。

3.本质还是对remote方法进行封装 。

关于页面IFrame中history Api的应用还是存在着一些争议和问题,在W3C的TPAC会议上也都有在进行相关的讨论

虽然最后有了一些共识,但是对于各个浏览器来说,兼容性还是不太一致。因此,建议大家在Iframe中使用history系列api时,务必小心并加强测试。

从上来看,是非常不科学的,iframe中可以影响到Window的history,Chorme也承认这是一个漏洞

4.实际开发中的应用

1.返回检测

1.实际开发需求:

用户填写表单时,需要监听浏览器返回按钮,当用户点击浏览器返回时需要提醒用户是否离开。如果不需要,则需要阻止浏览器回退

2.实现原理:监听 popstate 事件

popstate,MDN 的解释是:当浏览器的活动历史记录条目更改时,将触发 popstate 事件。

触发条件:当用户点击浏览器回退或者前进按钮时、当 js 调用 history.back,history.go, history.forward 时

但要特别注意:当 js 中 pushState, replaceState 并不会触发 popstate 事件

window.addEventListener('popstate', function(state) {
    console.log(state) // history.back()调用后会触发这一行
})
history.back()

原理是进入页面时,手动 pushState 一次,此时浏览器记录条目会自动生成一个记录,history 的 length 加 1。接着,监听 popstate 事件,被触发时,出弹窗给用户确认,点取消,则需要再次 pushState 一次以恢复成没有点击前的状态,点确定,则可以手动调用 history.back 即可实现效果

为什么在Iframe中不能使用Vue-Router20200607233903

window.onload = (event) => {
    window.count = 0;
    window.addEventListener('popstate', (state) => {
        console.log('onpopState invoke');
        console.log(state);
        console.log(`location is ${location}`);
        var isConfirm = confirm('确认要返回吗?');
        if (isConfirm) {
            console.log('I am going back');
            history.back();
        } else {
            console.log('push one');
            window.count++;
            const state = {
                foo: 'bar',
                count: window.count,
            };
            history.pushState(
                state,
                'test'
                // `index.html?count=${
                //  window.count
                // }&timeStamp=${new Date().getTime()}`
            );
            console.log(history.state);
        }
    });

    console.log(`first location is ${location}`);
    // setTimeout(function () {
    window.count++;
    const state = {
        foo: 'bar',
        count: window.count,
    };
    history.pushState(
        state,
        'test'
        // `index.html?count=${window.count}&timeStamp=${new Date().getTime()}`
    );
    console.log(`after push state locaiton is ${location}`);
    // }, 0);
};

2.Ajax请求后可以后退

在Ajax请求虽然不会造成页面的刷新,但是是没有后退功能的,即点击左上角是无法进行后退的

如果需要进行后退的话 就需要结合PushState了

当执行Ajax操作的时候,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的,只改变URL);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

demo参考链接https://www.zhangxinxu.top/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

5.参考资料

HIstory APi 学习 :

https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

https://wangdoc.com/javascript/bom/history.html

https://www.cnblogs.com/jehorn/p/8119062.html

Vue-Router源码

https://liyucang-git.github.io/2019/08/15/vue-router%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/

https://zhuanlan.zhihu.com/p/27588422

Iframe相关问题学习:

https://github.com/WICG/webcomponents/issues/184

https://www.cnblogs.com/ranran/p/iframe_history.html

https://www.coder.work/article/6694188

http://www.yuanmacha.com/12211080140.html

开发应用:

https://www.codenong.com/cs106610163/

Vue-Router实现源码:

#src/history/html5.js

beforeRouteLeave (to, from, next) { // url离开时调用的钩子函数
    if (
      this.saved ||
      window.confirm('Not saved, are you sure you want to navigate away?')
    ) {
      next()
    } else {
      next(false) // 调用next(false) 就实现了阻止浏览器返回,请看下面
    }
  }
setupListeners () {
        // 为简略,省略部分源码
    const handleRoutingEvent = () => {
      const current = this.current

      // Avoiding first `popstate` event dispatched in some browsers but first
      // history route not updated since async guard at the same time.
      const location = getLocation(this.base)
      if (this.current === START && location === this._startLocation) {
        return
      }

      this.transitionTo(location, route => { // 这里调用自定义的transitionTo方法,其实就是去执行一些队列,包括各种钩子函数
        if (supportsScroll) {
          handleScroll(router, route, current, true)
        }
      })
    }
    window.addEventListener('popstate', handleRoutingEvent) // 在这里添加popstate监听函数
    this.listeners.push(() => {
      window.removeEventListener('popstate', handleRoutingEvent)
    })
  }
#下面看 transitionTo 的定义,参见 src/history/base.js
  transitionTo (
    location: RawLocation,
    onComplete?: Function,
    onAbort?: Function
  ) {
    const route = this.router.match(location, this.current)
    this.confirmTransition( // 调用自身的confirmTransition方法
      route,
      // 为简略,省略部分源码
    )
  }

  confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
    const current = this.current
    const abort = err => {
      // changed after adding errors with
      // https://github.com/vuejs/vue-router/pull/3047 before that change,
      // redirect and aborted navigation would produce an err == null
      if (!isRouterError(err) && isError(err)) {
        if (this.errorCbs.length) {
          this.errorCbs.forEach(cb => {
            cb(err)
          })
        } else {
          warn(false, 'uncaught error during route navigation:')
          console.error(err)
        }
      }
      onAbort && onAbort(err)
    }
    if (
      isSameRoute(route, current) &&
      // in the case the route map has been dynamically appended to
      route.matched.length === current.matched.length
    ) {
      this.ensureURL()
      return abort(createNavigationDuplicatedError(current, route))
    }

    const { updated, deactivated, activated } = resolveQueue(
      this.current.matched,
      route.matched
    )

    const queue: Array<?NavigationGuard> = [].concat( // 定义队列
      // in-component leave guards
      extractLeaveGuards(deactivated), // 先执行当前页面的beforeRouteLeave
      // global before hooks
      this.router.beforeHooks, // 执行新页面的beforeRouteUpdate
      // in-component update hooks
      extractUpdateHooks(updated),
      // in-config enter guards
      activated.map(m => m.beforeEnter),
      // async components
      resolveAsyncComponents(activated)
    )

    this.pending = route
    const iterator = (hook: NavigationGuard, next) => { // iterator将会在queue队列中一次被执行,参见src/utils/async
      if (this.pending !== route) {
        return abort(createNavigationCancelledError(current, route))
      }
      try {
        hook(route, current, (to: any) => {
          if (to === false) { // next(false) 执行的是这里
            // next(false) -> abort navigation, ensure current URL
            this.ensureURL(true) // 关键看这里:请看下面ensureURL的定义,传true则是pushstate
            abort(createNavigationAbortedError(current, route))
          } else if (isError(to)) {
            this.ensureURL(true)
            abort(to)
          } else if (
            typeof to === 'string' ||
            (typeof to === 'object' &&
              (typeof to.path === 'string' || typeof to.name === 'string'))
          ) {
            // next('/') or next({ path: '/' }) -> redirect
            abort(createNavigationRedirectedError(current, route))
            if (typeof to === 'object' && to.replace) {
              this.replace(to)
            } else {
              this.push(to)
            }
          } else {
            // confirm transition and pass on the value
            next(to)
          }
        })
      } catch (e) {
        abort(e)
      }
    }
        // 为简略,省略部分源码
  }

#eusureURL 的定义,参见 src/history/html5.js
  ensureURL (push?: boolean) {
    if (getLocation(this.base) !== this.current.fullPath) {
      const current = cleanPath(this.base + this.current.fullPath)
      push ? pushState(current) : replaceState(current) // 执行一次pushstate
    }
  }
上一篇:java.lang.IllegalStateException: It is illegal to call this method if the current request is not in


下一篇:hash和history两种模式的区别