零基础如何通过URL参数修改离线HTML页面的标题与正文？

直接给你一个完整的可运行代码，所有逻辑和语言文本都内嵌在页面里，复制保存成HTML文件就能用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 浏览器顶部的标题，会随语言切换 -->
    <title>默认标题</title>
    <script>
        // 预先定义所有语言的文本，可自行添加/修改
        const languageTexts = {
            en: {
                header: "HEADER",
                body: "Body Text"
            },
            zh: {
                header: "页面标题",
                body: "正文内容"
            },
            abc: {
                header: "ABC HEADER",
                body: "ABC Body Content"
            }
        };

        // 获取URL中的lang参数
        function getLangParam() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('lang') || 'en'; // 无参数时默认用英文
        }

        // 页面加载完成后替换文本
        window.onload = function() {
            const currentLang = getLangParam();
            // 取对应语言的文本，无匹配则用默认英文
            const texts = languageTexts[currentLang] || languageTexts.en;
            
            // 修改浏览器顶部标题
            document.title = texts.header;
            // 修改页面内的标题元素
            document.getElementById('page-header').textContent = texts.header;
            // 修改页面正文
            document.getElementById('page-body').textContent = texts.body;
        };
    </script>
</head>
<body>
    <!-- 给标题和正文加ID，方便JS定位修改 -->
    <h1 id="page-header">默认标题</h1>
    <p id="page-body">默认正文</p>
</body>
</html>

使用方法： #

• 将代码保存为index.html
• 访问时在URL后追加?lang=语言代码，比如：
  • index.html?lang=zh 显示中文内容
  • index.html?lang=abc 显示你定义的abc语言内容
  • 直接打开index.html会使用默认英文

关键部分说明： #

1. 语言文本配置：languageTexts对象中，每个键是语言代码（如zh、abc），对应的值是该语言的标题和正文，新增语言只需照着现有格式添加即可。
2. URL参数获取：用URLSearchParams是目前最简洁的参数解析方式，无需自己写复杂的字符串拆分逻辑，主流浏览器都支持。
3. 页面加载时机：window.onload确保页面元素全部加载完成后再执行修改操作，避免因找不到元素导致页面异常。

内容的提问来源于stack exchange，提问作者Hiep Le Thanh