Question

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

我试图通过他们的管理面板在编辑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

getElementsByClassName重新生成零到多个对象的集合。您将需要选择一个，循环它们或使用jQuery。

如果您只想返回第一个按钮，则此方法有效。（thingy [0]。）

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

</script>

当您更换onclick事件时，不需要“return false”。

更好的选择是给按钮一个ID，然后使用getElementById来检索它。

Answer 2

问题似乎是Discourse使用了Ember。 Ember作为客户端框架没有任何问题，但它似乎是在脚本运行后向DOM添加元素。在脚本尝试添加事件侦听器后添加元素时，您的脚本将不会做太多（如您所发现的那样）。

我环顾了一个Discourse网页，我可以看到该按钮经常被添加到DOM中并从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()有两个参数：目标元素和选项对象。目标元素是您监听突变事件的元素。从页面上的使用视图源开始，body内部似乎没有太多用处，因此我们将关闭body。至于options对象，我们对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();

话语注册重定向到URL而不是模态

2 个答案: