javascript - 如何将 url 添加到 Webflow 中的灯箱？

Question

我正在开发一个 Webflow 网站。在主页上，我们有一个带有视频的灯箱。用户必须单击按钮才能查看灯箱。我们希望在灯箱可见时更改 URL，以使灯箱中的视频更易于共享。

如何为灯箱制作 URL？

Answer 1

假设 Webflow 具有不错的 JavaScript 功能，这是一种策略：

1. 在不重新加载页面的情况下实际更改浏览器 URL 框和历史记录的方法是history.pushState。链接是解释如何使用它的 MDN 文档。

2. 要获取页面的 URL，您可以使用window.location

3. 您可能会更改的 URL 部分是 URL 查询参数。如果只是一次，您可以手动执行此操作，例如将 /?lightbox=true 添加到基本 URL 的末尾。JS 有一个方便的接口，称为URLSearchParams()，您可以使用它来定义这些参数并将它们打印成字符串。

4. 当页面加载时，您需要一个函数来检查 URL 是否包含灯箱的参数，以及它的值是什么。你可以用 URlSearchParams() 来做到这一点。例子：

   var urlS=new URLSearchParams(window.location.search); //这会在页面加载时获取url参数中的任何内容
   var lightbox=urlS.get('lightbox'); //获取灯箱参数

   如果（灯箱==真）{灯箱激活（）；}