如何从window.onload事件获取URL参数并在其他函数中复用？

要让其他函数能访问到URL拆分后的参数，核心是让参数数据具备跨函数的可访问性，下面是两种实用方案：

方案一：将参数对象设为全局变量 #

把原来在window.onload内定义的data变量提升到全局作用域，这样其他函数就能直接读取其中的参数：

// 全局作用域声明参数对象
var urlParams = {};

window.onload = function() {
    var url = document.location.href,
        // 增加判断，避免URL无参数时后续代码报错
        params = url.split('?')[1]?.split('&') || [];
    for (var i = 0, l = params.length; i < l; i++) {
         var tmp = params[i].split('=');
         urlParams[tmp[0]] = tmp[1];
    }
    document.getElementById('here').innerHTML = urlParams.name;
};

// 其他函数中直接使用全局参数对象
function buildNewUrl() {
    // 假设你需要取URL中的AID参数
    var te = 'https://myurl.html?AID=' + urlParams.AID;
    // 后续逻辑...
}

方案二：封装参数拆分为独立工具函数 #

这种方式更规范，避免全局变量污染，任何需要获取URL参数的地方都可以调用这个函数：

// 封装获取URL参数的工具函数
function getUrlParams() {
    var url = document.location.href;
    var paramsStr = url.split('?')[1];
    var params = {};
    
    if (!paramsStr) return params;
    
    var paramPairs = paramsStr.split('&');
    for (var i = 0, l = paramPairs.length; i < l; i++) {
         var tmp = paramPairs[i].split('=');
         params[tmp[0]] = tmp[1];
    }
    return params;
}

window.onload = function() {
    var params = getUrlParams();
    document.getElementById('here').innerHTML = params.name;
};

// 其他函数中调用工具函数获取参数
function buildNewUrl() {
    var params = getUrlParams();
    var te = 'https://myurl.html?AID=' + params.AID;
    // 后续逻辑...
}

两种方案里，方案二更推荐——它的代码复用性更强，也不会引入不必要的全局变量。

内容的提问来源于stack exchange，提问作者Pradeep Kumar V