Question

我正在尝试创建一个用户脚本，以将新按钮添加到新的Reddit设计中，以便可以轻松返回到旧版式。新按钮进入somewhere around here.

这是我的简单代码：

var parent = document.getElementsByClassName('s17th0jh-5 iAfVlC')

var bOld = document.createElement("button");
bOld.innerHTML = "old";
parent[0].appendChild(bOld);

bOld.addEventListener("click", function() {
  var url = document.URL;
  url = url.replace('/www.', '/old.');
  window.location.href = url;
});

问题是，每次我加载或重新加载页面时，都会出现新按钮，并在一秒钟之内迅速消失。我该如何解决？

Answer 1

可以在window.load函数中添加功能吗？听起来reddit有一些在您之后执行的javascript（具有删除按钮的副作用）。如果您可以在reddit之后执行您的代码，那也许行得通吗？

window.addEventListener('load', function() { /*YOUR CODE*/ });

Answer 2

问题可能是因为由于reddit使用react，您的更改由于重新渲染而被覆盖。因为在脚本执行后，组件将重新呈现。但是解决此问题的方法是使用setTimeout。在这种情况下，组件/标题完成渲染后，脚本将附加按钮/链接

var parent = document.getElementsByClassName('s17th0jh-5 iAfVlC')

var bOld = document.createElement("button");
bOld.innerHTML = "old";
setTimeout(function(){
    parent[0].appendChild(bOld);

    bOld.addEventListener("click", function() {
        var url = document.URL;
        url = url.replace('/www.', '/old.');
        window.location.href = url;
    });
},1000)

如何将新按钮成功添加到Reddit新布局的顶部栏中

2 个答案: