单JS文件关联多HTML页面时跨页传值出现undefined问题

问题说明 #

现有两个HTML文件（Tickets.html和BookTickets.html）及一个JavaScript.js文件，JS已引入两个页面。单页内操作元素、类、ID均正常，控制台无报错，但点击Tickets.html中的元素，尝试将图片和名称信息传递到BookTickets.html并修改对应元素内容时，目标页面内容始终显示undefined。

原代码问题分析 #

当前写法的核心问题是：两个页面是独立的浏览器上下文，点击<a>标签会触发页面跳转，changeInfor函数里直接操作document.getElementById('imgPlace')和document.getElementById('namePlace')——这些元素属于BookTickets页面，但此时BookTickets还未加载，当前页面（Tickets）里根本找不到这些元素，赋值操作自然无效。页面跳转后，之前的变量也会被销毁，导致目标页面无法获取数据。

解决方案：通过URL参数传递数据 #

跨页面传递简单数据最常用的方式是URL查询参数（Query String）：在跳转时把图片地址和地名编码后加到目标URL里，BookTickets页面加载时读取这些参数，再修改自身DOM。

修改后的代码示例 #

Tickets.html 代码

移除<a>标签的直接跳转，通过JS处理跳转逻辑：

<div class="nation" onclick="changeInfor(this)">
    <img src="../Tickets/img/francejpg.jpg" alt="">
    <h2>France</h2>
    <p>Vietnam is located in the east of the Indochina
        peninsula, in Southeast Asia. Sharing a border
        with three countries, Vietnam borders China to
        the north, Laos and Cambodia to the west, and
        the East Sea to the east.</p>
    <span class="icon">
        <i class="ti-thumb-up"></i>
        <span>
            <i class="ti-heart"></i>
            <i class="ti-ticket"></i>
        </span>
    </span>
</div>

JavaScript.js 代码

更新changeInfor函数，构造带参数的跳转URL，并在目标页面加载时解析参数：

function changeInfor(src){
    // 更可靠地获取图片和标题元素
    const imgElement = src.querySelector('img');
    const titleElement = src.querySelector('h2');
    
    const imgUrl = imgElement.src;
    const placeName = titleElement.textContent;

    // 编码参数避免特殊字符导致的URL解析错误
    const encodedImg = encodeURIComponent(imgUrl);
    const encodedName = encodeURIComponent(placeName);

    // 构造目标URL并跳转
    const targetPage = '../BookTickets/index.html';
    window.location.href = `${targetPage}?img=${encodedImg}&name=${encodedName}`;
}

// BookTickets页面加载完成后执行参数解析和DOM更新
window.addEventListener('load', function() {
    // 解析URL查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const imgSrc = urlParams.get('img');
    const name = urlParams.get('name');

    // 更新页面元素（判断参数存在再修改，避免覆盖默认值）
    if (imgSrc) {
        document.getElementById('imgPlace').src = imgSrc;
    }
    if (name) {
        document.getElementById('namePlace').textContent = name;
    }
});

BookTickets.html 代码（保持原结构即可）

<div id="infor">
    <h1 id="namePlace">Việt Nam</h1>
    <img id="imgPlace" src="../Tickets/img/vietnamjpg.jpg" alt="">
</div>

补充说明 #

1. 使用querySelector替代firstElementChild链式调用，代码更易读且容错性更强，避免因DOM结构变动导致的错误。
2. encodeURIComponent用于编码参数，解决空格、特殊字符（如中文）导致的URL解析异常问题。
3. URLSearchParams是现代浏览器的标准API，能简洁可靠地解析URL查询参数，无需手动拆分字符串。

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