如何在另一个HTML页面中预览表单并设置字段为不可编辑状态？

核心思路 #

用iframe加载独立的form.html表单文件，避免预览样式和当前页冲突，表单加载完成后自动遍历所有表单控件，为空的字段直接添加禁用属性，即可实现不可编辑的预览效果，全程只需要基础的JS和CSS代码，上手难度低。

具体实现步骤 #

第一步：修改index.html代码 #

替换原index.html的内容为以下代码，注释已经标注了每部分的作用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单预览</title>
    <style>
        /* 预览区的基础样式，可自行调整 */
        #preview {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #eee;
            width: 500px;
            min-height: 200px;
        }
        /* 可选：禁用的表单控件样式优化，更有预览的质感 */
        #preview input:disabled, 
        #preview textarea:disabled, 
        #preview select:disabled {
            background-color: #f5f5f5;
            opacity: 0.8;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <h3>Select forms :</h3>
    <!-- 给按钮加id，方便绑定点击事件 -->
    <button id="selectFormBtn">Select form</button>
    <!-- 专门的预览容器 -->
    <div id="preview"></div>

    <script>
        // 拿到按钮和预览容器元素
        const selectBtn = document.getElementById('selectFormBtn');
        const previewBox = document.getElementById('preview');

        // 绑定按钮点击事件
        selectBtn.addEventListener('click', function() {
            // 清空之前的预览内容
            previewBox.innerHTML = '';
            // 创建iframe用来加载form.html
            const iframe = document.createElement('iframe');
            // 设置要加载的表单地址
            iframe.src = 'form.html';
            // 去掉iframe默认边框
            iframe.frameBorder = '0';
            // 设置iframe宽高适配容器
            iframe.width = '100%';
            iframe.height = '200px';
            
            // 等待iframe加载完成后处理禁用逻辑
            iframe.onload = function() {
                // 拿到iframe内部的document对象
                const formDoc = iframe.contentDocument || iframe.contentWindow.document;
                // 选中所有表单控件，需要其他类型可以自己加，比如button、radio等
                const formElements = formDoc.querySelectorAll('input, textarea, select');
                
                // 遍历所有控件
                formElements.forEach(el => {
                    // 如果控件值为空，就禁用
                    if (!el.value.trim()) {
                        el.disabled = true;
                    }
                })
            }

            // 把iframe插入到预览区
            previewBox.appendChild(iframe);
        })
    </script>
</body>
</html>

第二步：form.html无需修改 #

你原有的form.html代码不需要做任何调整，直接和index.html放在同一级目录下即可。

效果验证 #

把两个文件放在同一个文件夹，用浏览器打开index.html，点击「Select form」按钮，就可以看到form.html的表单预览效果，所有空输入框都无法点击编辑。

可选简化方案（不需要iframe） #

如果你不需要隔离表单和当前页的样式，可以直接用fetch加载form.html的内容插入到预览区，代码更短，把上面script标签里的点击事件逻辑替换成下面的即可：

selectBtn.addEventListener('click', async function() {
    previewBox.innerHTML = '加载中...';
    // 请求form.html的内容
    const res = await fetch('form.html');
    const formHtml = await res.text();
    // 插入到预览区
    previewBox.innerHTML = formHtml;
    // 遍历所有表单控件禁用空字段
    const formElements = previewBox.querySelectorAll('input, textarea, select');
    formElements.forEach(el => {
        if (!el.value.trim()) el.disabled = true;
    })
})

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