点击跳转链接加载新页面后如何调用指定函数？

方案1：URL参数触发（通用无跨域限制） #

• 主页面链接添加触发参数：

  <a href="another.html?triggerPopup=1" target="_blank" title="popup">打开弹窗页面</a>
  

• 在another.html中监听页面加载，读取参数并执行函数：

  window.addEventListener('load', () => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('triggerPopup') === '1') {
      // 调用页面已有的弹窗函数
      showPopup();
    }
  });
  
  // 页面原有弹窗函数示例
  function showPopup() {
    alert('目标页面弹窗已触发');
  }
  

• 优势：无需复杂逻辑，支持跨域场景，兼容性好。

方案2：window.open控制（仅同域可用） #

• 主页面通过window.open打开页面，监听加载完成后调用目标函数：

  <a href="javascript:void(0)" onclick="openPopupPage()" target="_blank" title="popup">打开弹窗页面</a>
  <script>
  function openPopupPage() {
    const newTab = window.open('another.html');
    // 轮询检查页面加载状态
    const loadChecker = setInterval(() => {
      if (newTab.document.readyState === 'complete') {
        clearInterval(loadChecker);
        newTab.showPopup();
      }
    }, 100);
  }
  </script>
  

• another.html保留原有弹窗函数：

  function showPopup() {
    alert('目标页面弹窗已触发');
  }
  

• 注意：浏览器跨域安全策略会阻止不同域名页面间的函数调用，仅适用于同域站点。

方案3：localStorage标记触发（支持跨域同浏览器场景） #

• 主页面点击时设置存储标记：

  <a href="another.html" onclick="setPopupTrigger()" target="_blank" title="popup">打开弹窗页面</a>
  <script>
  function setPopupTrigger() {
    localStorage.setItem('runPopup', 'true');
    // 超时清除标记，避免误触发
    setTimeout(() => localStorage.removeItem('runPopup'), 5000);
  }
  </script>
  

• another.html加载时检查标记并执行：

  window.addEventListener('load', () => {
    if (localStorage.getItem('runPopup') === 'true') {
      showPopup();
      localStorage.removeItem('runPopup');
    }
  });
  
  // 监听存储变化（应对页面已打开的情况）
  window.addEventListener('storage', (e) => {
    if (e.key === 'runPopup' && e.newValue === 'true') {
      showPopup();
      localStorage.removeItem('runPopup');
    }
  });
  
  function showPopup() {
    alert('目标页面弹窗已触发');
  }
  

• 优势：跨域场景下，同一浏览器内可实现触发；需注意及时清理标记防止后续误触发。

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