为什么将HTML代码封装为data:text/html格式URL后脚本功能失效？

问题原因及解决方法 #

核心问题1：未对HTML内容做URL编码

直接把原始HTML字符串拼接到data:text/html,后是不合法的，HTML中的特殊字符（<、>、"、&、空格、换行符等）会被浏览器识别为URL控制字符，导致HTML结构、JS代码被截断或解析错误，脚本自然无法正常运行。

核心问题2：HTML结构顺序错误

你将<meta>标签放在了<!DOCTYPE html>之前，会触发浏览器怪异（Quirks）模式，导致JS运行环境异常。

具体修复步骤 #

1. 调整HTML结构
   把你新增的两个<meta>标签移动到原HTML<head>标签的最开头，保证<!DOCTYPE html>是整个HTML文档的第一行内容，示例结构如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Read Text File</title>
    <!-- 后续原有代码保持不变 -->
</head>
<!-- 剩余原有代码保持不变 -->

2. 对完整HTML做URL编码后生成Data URL
   不要直接拼接字符串，使用encodeURIComponent对完整的HTML全文做编码后再拼接前缀，你可以直接在浏览器控制台执行以下代码生成合法URL：

// 把你调整完结构的完整HTML代码填到下面的模板字符串里
const fullHtml = `<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Read Text File</title>
    <!-- 这里放你剩下的所有HTML代码 -->
</html>`;
const validDataUrl = 'data:text/html,' + encodeURIComponent(fullHtml);
console.log(validDataUrl);

用生成的validDataUrl访问即可正常运行脚本逻辑。

补充调试方法 #

如果调整后仍有问题，先把JS中注释的document.getElementById('output').textContent=fr.result;这行放开，选择文件后如果页面能正常显示文件内容，说明文件读取逻辑正常，问题出在postMessage逻辑；如果无法显示内容，可打开浏览器控制台查看具体的JS报错信息排查问题。

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