如何在JS页面调用其他页面HTML元素创建弹窗表单并展示？

问题 #

现有index页面与独立JS页面，需在JS页面中创建一个弹窗表单，该表单的HTML元素来自另一随机页面，且仅在JS页面展示此表单。已尝试如下JS代码：

function popupscript(event) {
    let modal = document.createElement("div");
    modal.style.height = "500px";
    modal.style.width = "700px";
    modal.style.backgroundColor = "red";
    modal.style.position = "fixed";
    modal.style.left = "270px";
    modal.style.top = "100px";
    // modal.style.margin.left = "300px";
    let form = "<h1>HI</h1>"

    modal.innerHTML += "<h3>NO:</h3>";
    modal.innerHTML += "<form action='' method='POST'>";
    modal.innerHTML += "<label>";
    modal.innerHTML += "<input type='text' name='name' placeholder='Name' value=''>";
    modal.innerHTML += "</form>";
    body.append(modal);
}

当前弹窗样式、结构存在问题，且未实现从其他页面加载表单元素的核心需求，请问该如何解决？

解决方案 #

1. 先修正基础弹窗的结构与样式问题 #

现有代码存在两个基础错误：

• 未正确获取body元素，需用document.body替代
• HTML标签未闭合（<label>无对应</label>），导致DOM结构错乱

先修正这部分，同时添加遮罩层让弹窗更符合标准模态框逻辑：

function popupscript(event) {
    // 防止重复创建弹窗
    if (document.querySelector('.modal-overlay')) return;

    // 创建遮罩层
    const overlay = document.createElement('div');
    overlay.className = 'modal-overlay';
    overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    `;

    // 创建弹窗容器
    const modal = document.createElement("div");
    modal.className = 'modal-container';
    modal.style.cssText = `
        height: 500px;
        width: 700px;
        background-color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
    `;

    // 初始化弹窗基础内容
    modal.innerHTML = `
        <h3>外部表单：</h3>
        <div class="form-container"></div>
        <button class="close-modal" style="margin-top:20px;">关闭</button>
    `;

    // 添加关闭事件
    const closeHandler = () => {
        document.body.removeChild(overlay);
        document.body.removeChild(modal);
    };
    modal.querySelector('.close-modal').addEventListener('click', closeHandler);
    overlay.addEventListener('click', closeHandler);

    // 插入到页面
    document.body.appendChild(overlay);
    document.body.appendChild(modal);

    // 加载外部页面的表单
    loadExternalForm(modal.querySelector('.form-container'));
}

2. 实现从外部页面加载表单元素 #

使用fetch API请求目标页面的HTML，解析DOM后提取所需表单元素：

function loadExternalForm(container) {
    // 替换为你的目标页面URL
    const targetUrl = 'https://你的目标页面地址.html';

    fetch(targetUrl)
        .then(response => response.text())
        .then(html => {
            // 创建临时DOM解析外部HTML
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;

            // 提取目标表单（这里假设目标页面的表单有特定标识，比如class="target-form"，可根据实际调整）
            const targetForm = tempDiv.querySelector('.target-form');
            if (targetForm) {
                container.appendChild(targetForm);
            } else {
                container.innerHTML = '<p>未找到目标表单元素</p>';
            }
        })
        .catch(error => {
            console.error('加载外部表单失败:', error);
            container.innerHTML = '<p>加载表单失败，请稍后重试</p>';
        });
}

3. 绑定弹窗触发事件 #

在页面中添加触发按钮，并绑定弹窗函数：

// 示例：给页面中的按钮绑定弹窗触发事件
document.querySelector('.open-modal-btn').addEventListener('click', popupscript);

关键注意事项 #

• 跨域问题：如果目标页面与当前页面不同域，需目标服务器配置CORS允许跨域请求；若无法配置CORS，可通过后端代理转发请求解决。
• 表单提交：若需要提交表单，需调整表单的action属性，避免跳转到外部页面，可改为AJAX提交或指向当前页面的处理接口。

内容的提问来源于stack exchange，提问作者Nymul Islam Moon