在HTML头部动态加载CSS和JavaScript文件：实用指南

let jx = localStorage.getItem('jurisdiction');

// 假设原始意图是这样，但实际上href属性的值被包裹在普通字符串中
// 导致 ${jx} 不会被解析
document.write(`
<link rel="stylesheet" href="../_externals/stylesheets/assist/${jx}.css">
`);

let jx = localStorage.getItem('jurisdiction');
let cssPath = `../_externals/stylesheets/assist/${jx}.css`; // 正确使用模板字符串构建路径
// 然后将 cssPath 赋值给 link 元素的 href 属性

/**
 * 动态加载CSS文件到HTML头部
 * @param {string} url - CSS文件的URL
 * @param {string} id - 可选：link元素的ID，用于避免重复加载
 */
function loadCss(url, id = null) {
    if (id && document.getElementById(id)) {
        console.log(`CSS文件 ${url} (ID: ${id}) 已存在，跳过加载。`);
        return; // 避免重复加载
    }

    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    if (id) {
        link.id = id;
    }
    document.head.appendChild(link);
    console.log(`CSS文件 ${url} 已动态加载。`);

    // 可选：监听加载完成和错误事件
    link.onload = () => console.log(`CSS文件 ${url} 加载成功。`);
    link.onerror = () => console.error(`CSS文件 ${url} 加载失败。`);
}

// 示例用法：
// loadCss('path/to/my-styles.css', 'my-dynamic-css');

/**
 * 动态加载JavaScript文件
 * @param {string} url - JS文件的URL
 * @param {string} id - 可选：script元素的ID，用于避免重复加载
 * @param {boolean} async - 是否异步加载（默认为true）
 * @param {boolean} defer - 是否延迟加载（默认为false，async优先）
 * @returns {Promise<void>} - 返回一个Promise，在脚本加载完成或失败时resolve/reject
 */
function loadScript(url, id = null, async = true, defer = false) {
    return new Promise((resolve, reject) => {
        if (id && document.getElementById(id)) {
            console.log(`JS文件 ${url} (ID: ${id}) 已存在，跳过加载。`);
            resolve(); // 已经存在，直接视为成功
            return;
        }

        const script = document.createElement('script');
        script.src = url;
        if (id) {
            script.id = id;
        }
        script.async = async;
        script.defer = defer;

        script.onload = () => {
            console.log(`JS文件 ${url} 加载成功。`);
            resolve();
        };
        script.onerror = (error) => {
            console.error(`JS文件 ${url} 加载失败。`, error);
            reject(new Error(`Failed to load script: ${url}`));
        };

        document.head.appendChild(script); // 通常添加到head，或body末尾
        console.log(`JS文件 ${url} 已动态加载。`);
    });
}

// 示例用法：
// loadScript('path/to/my-script.js', 'my-dynamic-js', true, false)
//     .then(() => console.log('脚本执行完成'))
//     .catch(err => console.error(err));

document.addEventListener('DOMContentLoaded', () => {
    // 1. 从localStorage获取变量
    const jurisdiction = localStorage.getItem('jurisdiction');

    if (jurisdiction) {
        // 2. 构建动态URL
        const cssUrl = `../_externals/stylesheets/assist/${jurisdiction}.css`;
        const jsUrl = `../_externals/scripts/features/${jurisdiction}.js`; // 假设也有动态JS

        // 3. 动态加载CSS文件
        loadCss(cssUrl, `jurisdiction-css-${jurisdiction}`);

        // 4. 动态加载JS文件
        loadScript(jsUrl, `jurisdiction-js-${jurisdiction}`, true, false)
            .catch(error => console.warn(`未能加载特定管辖区的JS文件: ${error.message}`));

    } else {
        console.warn('localStorage中未找到"jurisdiction"变量，将加载默认资源或不加载特定资源。');
        // 可在此处加载默认的CSS/JS文件
        loadCss('../_externals/stylesheets/assist/default.css', 'default-css');
    }
});

/**
 * 辅助函数：动态加载CSS文件
 * (同上文 loadCss 函数)
 */
function loadCss(url, id = null) {
    if (id && document.getElementById(id)) {
        console.log(`CSS文件 ${url} (ID: ${id}) 已存在，跳过加载。`);
        return;
    }
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    if (id) link.id = id;
    document.head.appendChild(link);
    link.onload = () => console.log(`CSS文件 ${url} 加载成功。`);
    link.onerror = () => console.error(`CSS文件 ${url} 加载失败。`);
}

/**
 * 辅助函数：动态加载JavaScript文件
 * (同上文 loadScript 函数)
 */
function loadScript(url, id = null, async = true, defer = false) {
    return new Promise((resolve, reject) => {
        if (id && document.getElementById(id)) {
            console.log(`JS文件 ${url} (ID: ${id}) 已存在，跳过加载。`);
            resolve();
            return;
        }
        const script = document.createElement('script');
        script.src = url;
        if (id) script.id = id;
        script.async = async;
        script.defer = defer;
        script.onload = () => { console.log(`JS文件 ${url} 加载成功。`); resolve(); };
        script.onerror = (error) => { console.error(`JS文件 ${url} 加载失败。`, error); reject(new Error(`Failed to load script: ${url}`)); };
        document.head.appendChild(script);
        console.log(`JS文件 ${url} 已动态加载。`);
    });
}