Firefox中iframe加载GitHub文本文件触发下载的问题及兼容方案

你遇到的问题核心是Firefox对data URI的处理逻辑和Chrome/Edge存在差异，再加上代码里的编码操作有误，导致浏览器把iframe内容识别为需要下载的文件而非可渲染内容。下面给出两种可行的修复/替代方案：

方案一：修正data URI的编码和MIME类型 #

GitHub API返回的content字段本身已经是base64编码后的文本，你之前的代码多做了一次encodeURIComponent，导致内容编码异常，Firefox无法正确识别。同时，使用匹配文件类型的MIME类型（比如纯文本用text/plain），能让浏览器正确渲染内容。

修正后的代码：

<iframe id="github-iframe" src=""></iframe>
<script>
    fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
        .then(response => response.json())
        .then(data => {
            const iframe = document.getElementById('github-iframe');
            // 直接使用GitHub返回的base64内容，无需额外编码
            iframe.src = `data:text/plain;base64,${data.content}`;
        });
</script>

如果需要给代码添加语法高亮，可以把内容包裹在HTML结构里，使用text/html类型：

<iframe id="github-iframe" src=""></iframe>
<script>
    fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
        .then(response => response.json())
        .then(data => {
            const iframe = document.getElementById('github-iframe');
            // 解码base64内容
            const decodedContent = atob(data.content);
            // 转义HTML特殊字符，避免格式混乱和XSS风险
            const escapedContent = decodedContent.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            // 构建带样式的HTML页面
            const htmlContent = `
                <!DOCTYPE html>
                <html>
                <head>
                    <style>
                        pre {
                            background: #f5f5f5;
                            padding: 1rem;
                            font-family: monospace;
                            white-space: pre-wrap;
                            margin: 0;
                        }
                    </style>
                </head>
                <body>
                    <pre><code>${escapedContent}</code></pre>
                </body>
                </html>
            `;
            // 将HTML转为base64后设置iframe src
            iframe.src = `data:text/html;base64,${btoa(htmlContent)}`;
        });
</script>

方案二：直接操作iframe的DOM写入内容 #

这种方法绕过data URI的浏览器差异，直接往iframe的文档对象里写入内容，兼容性更强，也更灵活：

<iframe id="github-iframe" src=""></iframe>
<script>
    fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
        .then(response => response.json())
        .then(data => {
            const iframe = document.getElementById('github-iframe');
            // 先设置iframe为空白页，确保后续能正常操作DOM
            iframe.src = 'about:blank';
            // 等待iframe加载完成后写入内容
            iframe.onload = () => {
                const doc = iframe.contentDocument || iframe.contentWindow.document;
                const decodedContent = atob(data.content);
                const escapedContent = decodedContent.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                // 写入带样式的代码块
                doc.body.innerHTML = `<pre style="background:#f5f5f5;padding:1rem;font-family:monospace;">${escapedContent}</pre>`;
            };
        });
</script>

这两种方案都能同时兼容Firefox、Chrome和Edge，你可以根据是否需要自定义样式来选择。

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