如何在另一个HTML文件中调用其他HTML文件的class与ID

你有两个独立的HTML文件：一个是学生信息输入表单，另一个是展示成绩的表格页面，想要让表格内容和表单输入框的值保持一致，下面是几种可行的技术方案：

方案1：利用浏览器本地存储（LocalStorage） #

这是跨页面传递数据最常用的方式，数据会存在浏览器缓存中，除非手动清除否则会保留。

步骤： #

1. 修改表单页面代码，给输入框添加唯一ID，在点击按钮时把数据存入LocalStorage并跳转到表格页面：

<!-- 表单页面（如index.html） -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enter Details</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form id="studentForm">
        <label>Student's Name</label>
        <input type="text" id="studentName" placeholder="Enter student's name">
        <br><br>
        <label>Roll No.</label>
        <input type="text" id="rollNo" placeholder="Enter student's Roll No.">
        <br><br>
        <label>Class</label>
        <input type="text" id="studentClass" placeholder="Enter student's class">
        <br><br>
        <label>Enter marks for English</label>
        <input type="text" id="englishMarks" placeholder="Marks for English goes here...">
        <br><br>
        <label>Enter marks for Maths</label>
        <input type="text" id="mathsMarks" placeholder="Marks for Maths goes here...">
        <br><br>
        <label>Enter marks for Science</label>
        <input type="text" id="scienceMarks" placeholder="Marks for Science goes here...">
        <br><br>
        <button type="button" onclick="saveAndRedirect()">Get your marksheet</button>
    </form>

    <script>
        function saveAndRedirect() {
            // 收集所有输入值
            const studentData = {
                name: document.getElementById('studentName').value,
                rollNo: document.getElementById('rollNo').value,
                class: document.getElementById('studentClass').value,
                english: document.getElementById('englishMarks').value,
                maths: document.getElementById('mathsMarks').value,
                science: document.getElementById('scienceMarks').value
            };
            // 存入LocalStorage（转成JSON字符串）
            localStorage.setItem('studentInfo', JSON.stringify(studentData));
            // 跳转到表格页面
            window.location.href = 'marksheet.html';
        }
    </script>
</body>
</html>

2. **表格页面（如marksheet.html）**加载时，从LocalStorage读取数据并填充表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marksheet</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Student Name</th>
            <td id="displayName"></td>
        </tr>
        <tr>
            <th>Roll No.</th>
            <td id="displayRollNo"></td>
        </tr>
        <tr>
            <th>Class</th>
            <td id="displayClass"></td>
        </tr>
        <tr>
            <th>English</th>
            <td id="displayEnglish"></td>
        </tr>
        <tr>
            <th>Maths</th>
            <td id="displayMaths"></td>
        </tr>
        <tr>
            <th>Science</th>
            <td id="displayScience"></td>
        </tr>
    </table>

    <script>
        window.onload = function() {
            // 读取LocalStorage中的数据
            const studentData = JSON.parse(localStorage.getItem('studentInfo'));
            if (studentData) {
                // 填充表格内容
                document.getElementById('displayName').textContent = studentData.name;
                document.getElementById('displayRollNo').textContent = studentData.rollNo;
                document.getElementById('displayClass').textContent = studentData.class;
                document.getElementById('displayEnglish').textContent = studentData.english;
                document.getElementById('displayMaths').textContent = studentData.maths;
                document.getElementById('displayScience').textContent = studentData.science;
            }
        }
    </script>
</body>
</html>

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

适合一次性传递数据，跳转时将输入值作为URL参数携带，表格页面解析参数后填充内容。

步骤： #

1. 修改表单页面的按钮点击事件，拼接URL参数并跳转：

function goToMarksheet() {
    const name = document.getElementById('studentName').value;
    const rollNo = document.getElementById('rollNo').value;
    const cls = document.getElementById('studentClass').value;
    const english = document.getElementById('englishMarks').value;
    const maths = document.getElementById('mathsMarks').value;
    const science = document.getElementById('scienceMarks').value;
    
    // 编码特殊字符后拼接参数
    const url = `marksheet.html?name=${encodeURIComponent(name)}&rollNo=${encodeURIComponent(rollNo)}&class=${encodeURIComponent(cls)}&english=${encodeURIComponent(english)}&maths=${encodeURIComponent(maths)}&science=${encodeURIComponent(science)}`;
    window.location.href = url;
}

2. 表格页面解析URL参数：

window.onload = function() {
    const params = new URLSearchParams(window.location.search);
    // 填充表格，无参数时显示空字符串
    document.getElementById('displayName').textContent = params.get('name') || '';
    document.getElementById('displayRollNo').textContent = params.get('rollNo') || '';
    document.getElementById('displayClass').textContent = params.get('class') || '';
    document.getElementById('displayEnglish').textContent = params.get('english') || '';
    document.getElementById('displayMaths').textContent = params.get('maths') || '';
    document.getElementById('displayScience').textContent = params.get('science') || '';
}

方案3：使用iframe嵌入（同页面内交互） #

如果想把表格嵌入到表单页面（或反之），可以用iframe实现实时交互，注意必须同源（两个文件在同一域名/本地服务器下）。

例子： #

在表单页面嵌入表格页面的iframe，并实时同步输入内容：

<!-- 表单页面 -->
<iframe id="marksheetFrame" src="marksheet.html" style="width:100%;height:400px;"></iframe>

<script>
    // 监听输入框变化，实时更新表格
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', updateMarksheet);
    });

    function updateMarksheet() {
        const frame = document.getElementById('marksheetFrame');
        const frameDoc = frame.contentDocument || frame.contentWindow.document;
        
        frameDoc.getElementById('displayName').textContent = document.getElementById('studentName').value;
        frameDoc.getElementById('displayRollNo').textContent = document.getElementById('rollNo').value;
        frameDoc.getElementById('displayClass').textContent = document.getElementById('studentClass').value;
        frameDoc.getElementById('displayEnglish').textContent = document.getElementById('englishMarks').value;
        frameDoc.getElementById('displayMaths').textContent = document.getElementById('mathsMarks').value;
        frameDoc.getElementById('displayScience').textContent = document.getElementById('scienceMarks').value;
    }
</script>

注意事项： #

• 本地直接打开HTML文件（file://协议）可能触发跨域限制，建议用本地服务器（如Node.js的http-server、Python的SimpleHTTPServer）运行文件。
• 若只需临时保存数据，可替换LocalStorage为SessionStorage，关闭浏览器后数据会自动清除。

内容的提问来源于stack exchange，提问作者a random noob