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

Question

我在facebook.com中运行以下代码（使用Greasemonkey / Tampermonkey）。该代码隐藏了左侧导航菜单，可在your general wall中找到。

我的问题：

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

点击消息图标导航到对话页面，然后“查看所有信使”，我的对话页面显示为空白页。

我的代码：

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，您可以使用该ID隐藏其他页面上的所有内容，而不会干扰对话页面。有人告诉我Facebook会在会话页面上使用该ID #timeline_tab_content，因为当您向上或向下滚动时它会充当时间轴。

Answer 2

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

方式1：

我咨询了一位高级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()个概念（http://example.com/static/js/autocomplete.js），并了解{{3} }。

方式2 - 我可以采取的原始方式：

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

有关更多数据，请参阅here's an article to cover these（请参阅Dan Krieger和user8551674的回答）。