javascript - Discourse 注册重定向到 URL 而不是模态

Question

我目前一直在尝试在我的话语安装中更改用户注册的登录页面。

我正在尝试通过他们的管理面板在 Edit Html/css 中进行定制，特别是在 </head> 中部分，我也试过把它放在 </body> 中

出于某种原因，这段代码没有停止默认操作，也没有在点击时重定向用户

<script>
    var thingy = document.getElementsByClassName("sign-up-button")
    thingy.onclick ="return false;"
    thingy.onclick = function() {
        window.location.href = "https://join.domain.com";
    };
</script>

当我尝试这样做时

<script>
    var thingy = document.getElementsByClassName("sign-up-button");
    console.log(thingy.length);
    console.log(thingy)
    for (var i = 0; i < thingy.length; i++) {
            console.log('print this');
    };
</script>

它显示 thingy 的长度为 0，但随后它继续打印一个 html 元素，但从不迭代，因为长度为 0

Answer 1

问题似乎是 Discourse 使用 Ember。 Ember 作为客户端框架没有任何问题，但它似乎在您的脚本运行后向 DOM 添加元素。当您的脚本尝试添加事件监听器后添加元素时，您的脚本将不会做太多事情(如您所见)。

我环顾 Discourse 网页，发现该按钮经常被添加到 DOM 中或从中删除。这可能是因为 the button is only supposed to appear when the user is at the top of the page .

一种策略是做一些事情来延迟你的脚本——比如async defer , requestAnimationFrame , 或 setTimeout ——这样当你的脚本运行时，元素就已经存在了。因为我没有独立的页面来测试，所以我无法对此发表评论。

我要演示的是如何在将元素添加到 DOM 时附加事件处理程序。在过去，您会使用 mutation events ，如 this question 的大部分答案所示.由于这些事件现已弃用，您必须使用 Mutation Observers (这似乎是 fairly well supported )。

MutationObserver.observe() 有两个参数:目标元素和选项对象。目标元素是您在其上监听突变事件的元素。从页面上使用 view-source 来看，似乎 body 里面没有太多用处。首先，我们要出发了 body .至于选项对象，我们对 childList 感兴趣突变，和 subtree因为按钮不是 body 的直接后代.

回调函数(构造函数的唯一参数)将在事件发生时触发。这是您应该查找按钮并附加点击事件处理程序的时间点。为了保持清洁，您可能需要检查按钮是否真的在附近，如果在，则断开 MutationObserver。无需继续附加事件。

为了完整起见，我还喜欢调用函数来立即附加事件，以防万一该元素恰好已经存在。

请注意，即使在上下滚动时从 DOM 中移除和添加元素，您也只需要附加一次事件。它似乎是同一个元素，所以事件监听器仍然附加。

您还在评论中提到了有关在附加监听器后模式仍然显示的内容。你可以用 .stopPropagation() 停止它.

顺便说一句，这种传播与为什么你不能做一个简单的 $(window).on('click', '.sign-up-button', ...) 有点相关。 .这适用于大多数动态创建的元素，但在这种情况下，底层应用程序也在监听点击事件，显然会阻止事件冒泡。

我的代码如下。我正在使用 jQuery，因为我看到它出现在 Discourse 的页面上。

var targetNode = $('body')[0];

var attachEvent = function () {
  var $button = $('.sign-up-button');

  $button.on('click', function (e) {
    e.stopPropagation();

    // Do the redirect here
    console.log('gotcha');
  });

  if ($button.length) {
    console.log('hit');
    observer.disconnect();
  }
};

var callback = function() {
  console.log('mutation');
  attachEvent();
};

var observer = new MutationObserver(callback);

observer.observe(targetNode, { childList: true, subtree: true });

// Just in case...
attachEvent();