关于H5禁用window.open以及解决方法

问题描述

之前做了一个需求，要求判断用户在点击职位列表的时候，判断用户是否登录，若未登录则直接跳转到登录页，登陆完成后自动跳转到对应的职位详情页；若已登录则直接跳转到相应职位详情页。
又因为产品要求是统一打开新窗口，因此我在pc和移动端都直接使用了window.open()。我在js里写的逻辑就是拦截了a标签的默认行为，判断登陆状态和浏览器所处环境，根据条件进而跳转到不同的页面。

解决方法

1. 创建一个a标签元素插入到文档中并用js模拟点击事件（但是我实际用不太好用）
2. 移动端用window.location.href跳转

// 获取所有带有类名"login-required"的a标签
  const loginRequiredLinks = document.querySelectorAll(".login-required");

  // 给每个需要登录的链接添加点击事件处理函数
  loginRequiredLinks.forEach(function (link) {
    link.addEventListener("click", function (event) {
      var fromUrl = $(this).attr('href')
      var isMob = false;
      // 如果用户未登录，则阻止a标签的默认跳转行为
      if (toUrl) {
        event.preventDefault();
        var aimurl = toUrl
        if (
            navigator.userAgent.match(
              /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            )
          ){
            isMob = true;
            aimurl = '/recruit/member/choose'
          }
        // 显示吐司提示
        showToast("请先登录");

        // 在一定时间后跳转到登录页
        setTimeout(function () {
          // window.location.href = aimurl+`?from=${fromUrl}`; // 将URL替换为实际的登录页URL
          if(!isMob){
            window.open(aimurl+`?from=${fromUrl}`)
          }else{
            window.location.href = aimurl+`?from=${fromUrl}`;
          }
        }, 2000); 
      }
      // 如果用户已登录，则a标签会继续执行默认的跳转行为
    });
  });

  // 吐司提示函数
  function showToast(message) {
    // 创建一个div元素作为吐司提示框
    const toastDiv = $("<div></div>");
    toastDiv.text(message);
    toastDiv.addClass("toast");

    // 将吐司提示框添加到body中
    $("body").append(toastDiv);

    // 设置一定时间后自动隐藏吐司提示框
    setTimeout(function () {
      toastDiv.remove();
    }, 2000); // 这里设置了2秒的显示时间，可以根据需要调整显示时间
  }