历史 API 状态代码禁用网站功能

Question

我在运行下面的代码中facebook.com（要么用Greasemonkey/Tampermonkey）。该代码隐藏了左侧导航菜单，在 your general wall.

中可用

我的问题：

代码有效，但执行后我无法访问我的 faceook conversations page。

当通过单击消息图标导航到对话页面时，"See all in messenger"，我的对话页面显示为空白页面。

---

我的代码：

let utilityFunc = ()=>{
    let run = (run)=>{
        setInterval( ()=>{
            document.querySelectorAll('#left_nav_section_nodes, #pagelet_ego_pane, .ego_section').forEach((e)=>{
                e.remove();
            });
        }, 500);
    };

    let pS = window.history.pushState;
    let rS = window.history.replaceState;

    window.history.pushState = (a, b, url)=>{
        run(url);
        pS.apply(this, arguments);
    };

    window.history.replaceState = (a, b, url)=>{
        run(url);
        rS.apply(this, arguments);
    };
};

utilityFunc();

我的问题

为什么这段代码会导致这种情况？

Answer 1

检查 ID #timeline_tab_content 是否包装了对话页面。如果是这样，那么您需要找到一个更具体的 ID，您可以使用它来隐藏其他页面上的所有内容，而不会干扰对话页面。有人告诉我 Facebook 在对话页面上使用该 ID #timeline_tab_content，因为当您向上或向下滚动时它充当时间轴。

Answer 2

有两种方法可以解决这个问题。

方式一：

为此我咨询了一位资深的JS程序员，这是他给我的解决方案。代码的行为基本相同但没有问题：

let utilityFunc = ()=>{
    let run = ()=>{
        setInterval( ()=>{
            document.querySelectorAll('#left_nav_section_nodes, #pagelet_ego_pane, .ego_section').forEach((e)=> {
                e.remove();
            });
            // alert('All selectors are valid so far and if they weren't, this entire module was failing');
        }, 250);
    };

    let pS = window.history.pushState.bind(window.history);
    let rS = window.history.replaceState.bind(window.history);

    window.history.pushState = (...args)=>{
        run();
        pS(...args);
    };

    window.history.replaceState = (...args)=>{
        run();
        rS(...args);
    };
};

utilityFunc();

他告诉我要理解这个解决方案，需要了解 call()、apply() 和 bind() 概念（here's an article to cover these), and to understand spread syntax.

方式 2 - 我原来可以采用的方式：

可以使用 CSS 注入来注入 CSS 以便通过 CSS 操作选定的元素。

有关更多数据，请参阅 （请参阅 Dan Krieger 和 user8551674 的回答）。