不使用jQuery实现带URL参数的点击事件触发模态反馈框

需求说明 #

当用户访问带有特定哈希参数的URL时，自动触发打开模态反馈表单（比如点击"联系我们"链接后弹出的模态窗口），需要用原生JavaScript替代现有的jQuery实现方案。

原jQuery实现代码 #

jQuery(function(){
   if (window.location.hash){
      var hash = window.location.hash.substring(1);
      if (hash == "foobar"){
         foobar();
      }
   }
});

function foobar(){
   jQuery('.modal-open').click()   
}

原生JavaScript替代方案 #

以下是完全基于原生JS的实现，逻辑和原jQuery代码一致，无需依赖第三方库：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 检查URL是否包含哈希值
    if (window.location.hash) {
        // 去掉哈希前缀#，获取实际参数
        const hash = window.location.hash.substring(1);
        // 判断是否匹配目标参数
        if (hash === "foobar") {
            foobar();
        }
    }
});

function foobar() {
    // 找到触发模态框的按钮元素
    const modalTrigger = document.querySelector('.modal-open');
    // 确保元素存在后模拟点击事件
    if (modalTrigger) {
        modalTrigger.click();
    }
}

补充优化建议 #

如果你的模态框是基于Bootstrap这类框架实现的，直接调用框架原生方法显示模态框会比模拟点击更可靠。以Bootstrap 5为例：

function foobar() {
    const modalElement = document.getElementById('your-modal-id');
    if (modalElement) {
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
    }
}

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