一个浏览器网页翻页过程中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了。

fzlte0

dork 发表于 2026-4-23 08:29
实在没看懂楼主的目的是要干啥，实测*******.center/page/2，.center/page/3，.center/page/6都可以自动翻 ...

我这边开发个chrome插件，插件的注入脚本需要在网页主线程里面发送xhr请求，这个请求头的referer字段是必须带上的，而一般的请求头referer是不能通过setRequestHeader进行设置。同时，发现referer指向单页面应用的url路由，而注入脚本发xhr请求时referer一直是第1页的url，我就想在注入脚本中通过变更url来实现referer的动态调整，翻页会导致url的变化，所以研究了下这个翻页的过程。下面是xhr的请求代码。
for (let p=0; p<totalPages; ++p){
    // 变化url，调整referer
    if (p>0) {
        var e = "/page/"+(p+1);
        window.history.pushState({key: we(ge())}, "", e);
    }

    const xhr = new XMLHttpRequest();

    console.log('send xhr...');

    xhr.open('GET','https://spa1.scrape.center/api/movie?limit=10&offset='+p*recordsPerPage,false);
    xhr.setRequestHeader('accept','application/json, text/plain, */*');
    xhr.setRequestHeader('cache-control','no-cache');
    xhr.setRequestHeader('pragma','no-cache');
    xhr.send();
    if (xhr.status == 200){
        console.log(xhr.responseText);
    }
}

fzlte0

dork 发表于 2026-4-23 12:54
一次性就可以下载或请求所有页面：*******.scrape.center/api/movie/?limit=1000&offset=，不需要翻页

这个limit改成1000没试过。这文章主要目的是研究如何给请求头的referer字段赋值，目前想到可以通过改变url来实现这个目的，所以研究下翻页改变url的事。这个网站是我的示例，其实它不用referer字段也能请求成功，但是我真实的网站是要动态改变referer的。

whitenow

很有帮助，感谢贴主

lingyunbbs

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

WQ52pojie

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

dork

实在没看懂楼主的目的是要干啥，实测*******.center/page/2，.center/page/3，.center/page/6都可以自动翻页呀，不需要带什么参数

cai2532

太高深了，看不懂~

dork

fzlte0 发表于 2026-4-23 10:31
我这边开发个chrome插件，插件的注入脚本需要在网页主线程里面发送xhr请求，这个请求头的referer字段是必 ...

一次性就可以下载或请求所有页面：*******.scrape.center/api/movie/?limit=1000&offset=，不需要翻页

NOCKI

高深，需要花点时间~