如何将JavaScript变量追加到两个HTML链接中

嘿，你的基础思路是完全没问题的——页面加载完成后把PHP输出的变量追加到两个链接的末尾，这个逻辑是能跑起来的，但有几个细节没处理好，可能会导致意外问题，我来帮你梳理下：

原实现的潜在坑点 #

• URL协议缺失：你写的oursite.com/没有http://或https://，浏览器会把它当成当前域名下的相对路径，拼接后可能变成当前域名/oursite.com/xxx，这肯定不是你想要的外部链接效果。
• 参数拼接不规范：如果原链接本身带参数（比如oursite.com/?id=123），直接追加变量会变成oursite.com/?id=123xxx，不符合URL参数规则，应该用&来衔接新参数。
• 代码重复冗余：两次重复写获取旧链接、设置新链接的逻辑，既不优雅也不好维护。

优化后的靠谱实现 #

第一步：先把HTML链接写规范 #

给所有外部链接加上完整的协议头：

<a id="link" href="https://oursite.com/">Link</a>
<a id="link2" href="https://othersite.com/">...</a>

第二步：精简且健壮的JavaScript代码 #

用循环批量处理链接，同时处理参数拼接的场景：

window.onload = function setHref() {
    // 用json_encode确保PHP变量转义成合法的JS字符串，避免语法错误
    var affglcid = <?php echo json_encode($kws); ?>;
    // 把要处理的链接ID放在数组里，方便批量操作
    const targetLinks = ['link', 'link2'];
    
    targetLinks.forEach(linkId => {
        const linkElement = document.getElementById(linkId);
        // 容错处理：如果找不到对应ID的元素，直接跳过，避免报错
        if (!linkElement) return;
        
        let updatedHref = linkElement.href;
        // 判断原链接是否已有参数，决定用?还是&来拼接新内容
        const paramSeparator = updatedHref.includes('?') ? '&' : '?';
        // 这里假设你要把affglcid作为参数值，如果需要参数名（比如glcid=xxx），改成`${paramSeparator}glcid=${affglcid}`即可
        updatedHref += `${paramSeparator}${affglcid}`;
        
        linkElement.setAttribute('href', updatedHref);
    });
};

额外补充 #

• 如果$kws是要作为路径的一部分（比如oursite.com/xxx），那去掉参数分隔符的判断，直接拼接/${affglcid}就行，但要注意原链接是否以/结尾，避免出现//的情况，可以加个判断：updatedHref += updatedHref.endsWith('/') ? affglcid : '/' + affglcid。
• 你用json_encode传递变量的做法非常正确，它会自动处理字符串里的引号、换行等特殊字符，避免JavaScript语法报错。

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