V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
JCZ2MkKb5S8ZX9pq
V2EX  ›  JavaScript

请教一个页面跳转的监听问题

  •  
  •   JCZ2MkKb5S8ZX9pq · 2019-12-10 13:23:51 +08:00 · 3171 次点击
    这是一个创建于 1570 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • js 问题,油猴脚本里用。
    • 比如 B 站任意一个视频
      [ 2019 年末音番] Best Artist 2019 全场 [猪猪]
    • 如果点击右侧的推荐视频,url 会变,window.location 也会更新,但是试了几种监听方式 hashchange 啥的都捕获不到这个页面变化。
    • 能想到的笨办法就是 setInterval 判断变化。
    • 想问问有没有更好的方法。
    gesse
        1
    gesse  
       2019-12-10 13:32:03 +08:00
    history.pushState
    cheeto
        2
    cheeto  
       2019-12-10 13:37:44 +08:00
    看看这篇文章 https://juejin.im/post/5c2708cd6fb9a049f06a5744
    也许对你有帮助
    JCZ2MkKb5S8ZX9pq
        3
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-12-10 13:40:10 +08:00
    @gesse
    额,我搜了下,这个配套的 window.onpopstate,好像还是不行。
    codehz
        4
    codehz  
       2019-12-10 13:42:39 +08:00 via Android
    @JCZ2MkKb5S8ZX9pq 你可以 hook 掉 push state 的(
    JCZ2MkKb5S8ZX9pq
        5
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-12-10 13:43:50 +08:00
    @cheeto 嗯,试下来是要用最后那个方法,可以监听到 pushstate。
    JCZ2MkKb5S8ZX9pq
        6
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-12-10 20:54:58 +08:00
    @gesse
    @cheeto
    @codehz

    js 小白,不是很懂原理,但想请教新遇到的一个现象。
    let _wr = function(type) {
    let orig = history[type]
    return function() {
    let rv = orig.apply(this, arguments),
    e = new Event(type)
    e.arguments = arguments
    window.dispatchEvent(e)
    return rv
    }
    }
    history.pushState = _wr('pushState')
    window.addEventListener('pushState', function(e) {
    console.log(e)
    });

    先是用上面这个方法实现了监听。

    但是后来发现,如果在不同油猴脚本都调用同样的代码,会导致监听重复激活。
    于是就把_wr 传入的 type 名后面加了一个 uniqueId,就比如:
    history.pushState = _wr('pushState_scriptname')

    这样一来,好像在原本 pushState 的地方,页面像被刷新了一样,油猴脚本倒也重新被加载了,监听也就不用加了。

    不过不大明白原理,不知道各位高手能不能给说说。
    JCZ2MkKb5S8ZX9pq
        7
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-12-10 21:06:36 +08:00
    是不是原本它是加了个事件以便于监听。
    但我给 history 加了一个非标准名称的新方法,然后导致了一些变化?
    codehz
        8
    codehz  
       2019-12-10 21:48:12 +08:00 via Android
    @JCZ2MkKb5S8ZX9pq 所以为啥要绕一圈发个事件,不能直接在 hook 处做你的逻辑么
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2926 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:15 · PVG 23:15 · LAX 08:15 · JFK 11:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.