基于mobile-detect.js为Squarespace表单URL添加设备与浏览器参数

嘿，这个需求其实不难实现，我给你两种靠谱的方案，你可以根据自己的偏好选择：

方案一：直接修改表单隐藏字段（推荐，无URL变动） #

这种方式不需要修改页面URL，直接把设备/浏览器信息赋值给表单的隐藏字段，提交时自然会被收集，用户体验更流畅。

步骤如下：

1. 先确保你已经在页面中引入了mobile-detect.js库（可以通过Squarespace的代码注入功能添加）。
2. 在页面的页脚注入以下脚本：

// 初始化设备检测实例
var md = new MobileDetect(window.navigator.userAgent);

// 获取浏览器和设备信息，处理默认值
var browserName = md.userAgent() || 'unknown';
var deviceInfo = md.os() || md.device() || 'unknown';

// 找到表单中对应的隐藏字段（确保你的表单里已经创建了name为SQF_BROWSER和SQF_DEVICE的隐藏字段）
var browserField = document.querySelector('input[name="SQF_BROWSER"]');
var deviceField = document.querySelector('input[name="SQF_DEVICE"]');

// 给字段赋值，转成小写更统一
if (browserField) {
  browserField.value = browserName.toLowerCase();
}
if (deviceField) {
  deviceField.value = deviceInfo.toLowerCase();
}

3. 确认你的Squarespace表单里已经添加了两个隐藏字段，名称分别是SQF_BROWSER和SQF_DEVICE（和脚本里的name对应）。

方案二：动态追加URL参数（适合需要在URL中展示参数的场景） #

如果一定要把参数加到URL里，可以用下面的脚本，它会在页面加载时修改URL（无刷新替换历史记录）：

// 初始化设备检测实例
var md = new MobileDetect(window.navigator.userAgent);

// 获取浏览器和设备信息
var browserName = md.userAgent() || 'unknown';
var deviceInfo = md.os() || md.device() || 'unknown';

// 解析当前URL
var currentUrl = new URL(window.location.href);

// 设置或更新参数
currentUrl.searchParams.set('SQF_BROWSER', browserName.toLowerCase());
currentUrl.searchParams.set('SQF_DEVICE', deviceInfo.toLowerCase());

// 替换当前页面的URL，不刷新页面
window.history.replaceState({}, document.title, currentUrl.toString());

这样用户打开页面时，URL就会带上这两个参数，Squarespace的隐藏字段会自动读取这些值并在提交时收集。

注意事项 #

• 确保mobile-detect.js在你的脚本之前加载，否则会报错。
• 如果你的表单是AJAX提交的，方案一完全没问题；如果是传统跳转提交，两种方案都适用。
• 可以根据需要调整mobile-detect.js的方法，比如md.browser()可能更精准获取浏览器名称，md.device()获取设备类型，你可以测试后选最合适的。

内容的提问来源于stack exchange，提问作者dashb