如何在JS中通过if/else判断动态设置a标签href链接 并通过onload触发

1. 如何在HTML中调用外部JS文件的函数 #

首先需要在HTML中正确引入你的JS文件，在HTML的<head>标签内或者</body>闭合标签前添加script标签即可。比如你的JS文件命名为user.js，和HTML文件在同一个目录下，写法如下：

<head>
  <!-- 其他head内容如title、meta等 -->
  <script src="user.js"></script>
</head>

只要JS文件路径配置正确，引入完成后你写在JS里的what_user()函数就可以被HTML的onload事件正常调用，你现在写的<body onload="what_user()">逻辑本身没有问题。入门阶段暂时不要给script标签加defer/async属性，就不会出现函数未加载完成的问题。

2. 现有代码的问题修正 #

你当前的代码运行后生成的a标签没有内容，用户看不到可点击的区域，且href属性没有加引号，遇到带特殊字符的链接会报错，修正后的JS代码如下：

function what_user() {
    var d = document.getElementById("result");
    var user = ""; // 后续替换为实际获取用户类型的逻辑
    var linkUrl = user === "" ? "admin_index.html" : "admin_user.html";
    // 保留原div的文字内容，给href属性添加引号
    d.outerHTML = `<a href="${linkUrl}">${d.innerText}</a>`;
}

如果不想替换整个outerHTML，也可以直接在div内插入a标签，写法更稳妥：

function what_user() {
    var d = document.getElementById("result");
    var user = ""; // 实际获取用户类型的逻辑
    var link = document.createElement('a');
    link.href = user === "" ? "admin_index.html" : "admin_user.html";
    link.innerText = d.innerText;
    d.innerHTML = '';
    d.appendChild(link);
}

3. JS函数返回值的使用 #

如果函数定义了返回值，直接调用函数即可拿到返回的内容，示例如下：

// 定义返回用户类型的函数
function getUserType() {
    // 这里写获取用户类型的逻辑，比如从本地存储、后端接口取值
    return localStorage.getItem('user_type') || '';
}

function what_user() {
    var d = document.getElementById("result");
    // 调用getUserType函数，将返回值赋值给user变量
    var user = getUserType();
    var linkUrl = user === "" ? "admin_index.html" : "admin_user.html";
    d.outerHTML = `<a href="${linkUrl}">${d.innerText}</a>`;
}

如果你的需求是页面加载后直接跳转到对应页面，不需要用户手动点击，可以不用修改DOM，直接使用window.location.href = linkUrl即可实现自动跳转。

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