一个浏览器网页翻页过程中url变化的过程分析

fzlte0

   网页地址：aHR0cHM6Ly9zcGExLnNjcmFwZS5jZW50ZXIv
   最近想开发一个浏览器扩展程序在浏览器目标网站上执行自动化操作的功能，其中插件发出的XHR请求头中包含referer字段，js代码中是无法直接设置referer字段的，我们想到可以通过内容脚本注入dom的<script>元素到网页上，让<script>指向插件请求代码并挂到网页主线程上，这时插件请求代码就可以使用网页当前的referer。referer一般就是浏览器url地址栏上呈现的url，因此我们要跟踪追溯网站浏览器上url变化的过程。下面就来分析下这个过程。
  本网站是基于Vue的，所以要看下Vue下面有几种触发url变化的机制。（搜索“vue翻页 url变化” 得到https://worktile.com/kb/p/3680759# 本处引用该文章）
        1、使用Vue Router的编程式导航
  在Vue组件中，通过调用this.$router.push方法可以改变当前页面的URL。
        2、通过修改window.location对象
  这种方法适用于不使用Vue Router的情况，或者在需要完全刷新页面时使用。可以通过直接修改window.location.href来改变URL。
        3、使用HTML5的history API
       HTML5的history API提供了一种更为细粒度的控制方式，可以在不刷新页面的情况下改变URL。常用的方法有history.pushState和history.replaceState。
  接着，打开开发者工具，分别搜索关键字：router.push、location.href、pushState、replaceState，打上断点，观察在当前页点击任意一个其他页的按钮的代码流程。此处我们用第2页点击第3页做例子说明。（url从/page/2到/page/3）










        至此整个翻页的代码执行流程就结束了。后面我们将会在内容脚本中向网页注入history.pushState方法执行网页url的变化，发起XHR请求就会携带动态的referer了。

whitenow

很有帮助，感谢贴主

lingyunbbs

用谷歌浏览器进行开发者调试的时候都是直接获取网络里面的信息了，这个看元素真的费功夫，得一个个找

WQ52pojie

感觉很有帮助,感谢贴主，谢谢。

wangbaobao123

感谢，学习了