如何将iframe赋值给div的innerHTML？iframe无内容问题排查

问题根源 #

你代码里的escapeHtml函数会把request.responseText中的所有HTML标签转义成实体字符（比如<变成<），导致iframe的srcdoc属性拿到的是纯文本而非可解析的HTML，所以框架能显示但内部没有内容。另外直接通过innerHTML插入iframe时，转义后的内容无法被浏览器解析渲染。

解决方案1：修复innerHTML方式的转义逻辑 #

不需要对整个HTML内容做全量转义，只需要转义srcdoc属性里的双引号，避免破坏HTML结构。修改相关代码如下：

// 替换原escapeHtml，只针对双引号转义
function escapeSrcdoc(html) {
    return html.replace(/"/g, '"');
}

function getDebugText(request) {
    var responseText = "";
    try {
        var responseJSON = JSON.parse(request.response);
        for (const [key, val] of Object.entries(responseJSON)) {
            responseText += `  ${key}: ${val}\n`;
        }
    } catch(error) {
        if(request.responseText.startsWith('<!doctype html>')) {
            // 调用新的转义函数
            responseText = `<div>${request.statusText}</div><iframe scrolling="yes" style="width: 100%;" srcdoc="${escapeSrcdoc(request.responseText)}"></iframe>`
        } else {
            responseText = escapeHtml(`${request.statusText}\n${request.responseText}`);
        }
    }
    console.log(responseText)
    return responseText;
}

解决方案2：改用DOM元素创建（appendChild方式） #

如果你更倾向于用appendChild操作DOM，重构showText和getDebugText函数，直接创建元素并添加到目标div：

function showText(debugElement, content) {
    if (!debugElement) return;
    // 先清空目标div原有内容
    debugElement.innerHTML = '';
    if (typeof content === 'string') {
        debugElement.textContent = content;
    } else if (content instanceof Node) {
        debugElement.appendChild(content);
    } else if (Array.isArray(content)) {
        content.forEach(node => {
            if (node instanceof Node) debugElement.appendChild(node);
        });
    }
}

function getDebugText(request) {
    try {
        const responseJSON = JSON.parse(request.response);
        let responseText = "";
        for (const [key, val] of Object.entries(responseJSON)) {
            responseText += `  ${key}: ${val}\n`;
        }
        return responseText;
    } catch(error) {
        if(request.responseText.startsWith('<!doctype html>')) {
            // 创建状态文本div
            const statusDiv = document.createElement('div');
            statusDiv.textContent = request.statusText;
            // 创建iframe并设置属性
            const iframe = document.createElement('iframe');
            iframe.scrolling = "yes";
            iframe.style.width = "100%";
            iframe.srcdoc = request.responseText; // 直接赋值HTML，无需过度转义
            // 返回元素数组，让showText添加到目标div
            return [statusDiv, iframe];
        } else {
            return `${request.statusText}\n${request.responseText}`;
        }
    }
}

调用方式保持不变：

showText(document.getElementById('details'), getDebugText(response))

注意事项 #

• srcdoc属性支持所有现代浏览器，若需兼容旧浏览器，可考虑将HTML转为Blob URL后赋值给iframe的src属性；
• 直接赋值srcdoc时，确保request.responseText为可信内容，避免XSS风险。

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