点击站内链接触发对应JavaScript：页面间脚本差异化加载需求

嘿，我来帮你搞定这个问题！你想要在/the-page-1的不同链接打开/the-page-2时加载对应脚本，核心思路就是通过URL传递标识参数，然后在/the-page-2里根据这个参数动态加载对应的JS文件。之前的写法没生效，大概率是因为没把链接的差异传递过去，或者/the-page-2没有处理这个差异的逻辑。

1. 修改/the-page-1的链接，添加标识参数 #

在每个链接的href里加上查询参数，比如用script作为参数名，不同的链接对应不同的参数值，用来区分要加载的脚本：

<!-- /the-page-1 中的链接示例 -->
<a href="/the-page-2?script=user-profile">打开用户配置页面</a>
<a href="/the-page-2?script=payment-module">打开支付模块页面</a>
<a href="/the-page-2?script=notification-center">打开消息中心页面</a>

2. 在/the-page-2中添加脚本加载逻辑 #

在/the-page-2的页面里（推荐放在</body>标签前，确保DOM加载完成），添加一段JavaScript来读取URL参数，并动态加载对应的脚本：

// 封装一个获取URL查询参数的工具函数
function getQueryParam(paramName) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(paramName);
}

// 获取当前要加载的脚本标识
const requestedScript = getQueryParam('script');

// 定义脚本路径的映射表，把标识和对应的脚本文件路径对应起来
// 这里的路径根据你实际的文件位置调整
const scriptPaths = {
  'user-profile': '/assets/js/user-profile.js',
  'payment-module': '/assets/js/payment-module.js',
  'notification-center': '/assets/js/notification-center.js'
};

// 校验并加载脚本
if (requestedScript && scriptPaths[requestedScript]) {
  // 创建script标签
  const scriptElement = document.createElement('script');
  // 设置脚本路径
  scriptElement.src = scriptPaths[requestedScript];
  // 设置异步加载（如果不需要异步可以去掉，或者用defer）
  scriptElement.async = true;
  
  // 可选：脚本加载成功后的回调
  scriptElement.onload = () => {
    console.log(`✅ 成功加载${requestedScript}脚本`);
  };
  
  // 可选：脚本加载失败的错误处理
  scriptElement.onerror = () => {
    console.error(`❌ 加载${requestedScript}脚本失败`);
  };
  
  // 将script标签添加到页面中，开始加载
  document.body.appendChild(scriptElement);
} else {
  // 没有匹配到有效脚本时的默认处理
  console.log('⚠️ 未指定有效脚本，加载默认配置');
  // 这里可以加载默认脚本，比如：
  // const defaultScript = document.createElement('script');
  // defaultScript.src = '/assets/js/default.js';
  // document.body.appendChild(defaultScript);
}

为什么之前的写法没生效？ #

你之前的链接只指向了/the-page-2，没有传递任何区分不同链接的标识，所以/the-page-2根本不知道要加载哪个脚本。通过添加URL查询参数，就能把“来自哪个链接”的信息传递过去，再配合/the-page-2的逻辑就能实现按需加载了。

额外的优化建议 #

• 安全性：用映射表（比如上面的scriptPaths）来管理脚本路径，而不是直接把参数拼接到路径里，这样可以避免恶意参数导致加载未知脚本的风险。
• 默认处理：如果用户直接访问/the-page-2（没有参数），可以加载一个默认脚本，或者显示提示信息，提升用户体验。
• 脚本加载顺序：如果你的脚本依赖其他库（比如jQuery），可以把这段加载逻辑放在依赖库之后，或者用defer属性确保加载顺序正确。

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