页脚的 Javascript 在页面转换后无法正常工作

开发
1

我编写了一段 CSS 来实现页脚菜单的响应式布局。当切换到移动设备时，页脚菜单会设计成类似汉堡菜单的样式。因此，我在 编辑 CSS/HTML >> /head 部分编写了一个点击函数，用于在移动视图下切换菜单。

ScriptIssue
ScriptIssue820×283 5.72 KB

在这个例子中，点击函数在 Discourse 主页上运行正常。但在其他页面（如摘要、论坛账户等）上，脚本被阻止了，导致我无法查看子菜单。不过，我可以在浏览器源代码中看到该脚本。

为什么自定义脚本在某些 Discourse 页面上会被阻止执行？这个问题的永久解决方案是什么？

2

Discourse 是一个单页应用。因此，除非使用正确的钩子，否则你在 <head> 标签中添加的脚本仅在初始页面加载时执行一次。你可能需要调整代码，改为添加事件监听器。

能分享一下你的代码吗？

3 个赞
3

这是我的脚本，

ScriptTagHead
ScriptTagHead1117×450 20.8 KB

4

解决这个问题可能有几种方法，但让我们尝试使用正确的自定义钩子来“规范”地处理。

当你向主题的页脚部分添加 HTML 时，Discourse 会进行一些处理，以防止其在页面切换或无限滚动添加更多元素时出现跳动。

它会被添加为一个 custom-html 组件，位置如下：

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

如果你查看该组件的代码，会发现它在渲染时会触发一个应用事件。

discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

这就是你需要使用的钩子。

如何使用它？
plugin-api 中有一个方法，允许你在特定应用事件触发时执行代码。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519

既然我们已经知道事件名称，就可以这样使用：

api.onAppEvent("inserted-custom-html:footer", () => {
  // 在此处执行你的操作
});

由于这是一个 plugin-API 方法，你需要将脚本标签的类型更改为 text/discourse-plugin，如下所示：

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  // 在此处执行你的操作
});
</script>

上面的代码片段会在页脚渲染时触发。因此，你现在可以这样做：

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  $(".footer-div #footerNavDiv").click(function () {
    console.log("click event captured");
    // 在此处处理点击事件的操作
  });
});
</script>

你可以在此处了解更多关于 plugin-API 的信息：这里

5 个赞
5

太棒了，谢谢 :slight_smile:

1 个赞