JavaScript 运行在浏览器沙箱环境中，它无法直接访问浏览器完整的、未经处理的“原始”HTML源码。

小米手机 js 脚本取网页源码失败
（图片来源网络，侵删）

下面我将详细解释原因，并提供几种可行的解决方案,从最推荐到备用方案排列。

为什么取不到源码？（根本原因）

当你用浏览器打开一个网页时，你看到的并不是服务器直接发来的原始HTML文件,这个过程通常是这样的：

  1. 服务器发送原始HTML：服务器给你发送一个包含 <html>, <head>, <body> 等标签的文本文件，这个文件可能包含 <script> 标签和 <link>
  2. 浏览器解析HTML：浏览器开始解析这个HTML文件。
  3. 加载并执行JavaScript/CSS：当浏览器遇到 <script src="..."> 或 <link rel="stylesheet" href="..."> 时，它会异步地去下载相应的JS文件和CSS文件。
  4. JavaScript动态修改DOM：下载下来的JS代码会执行，它可能会通过 document.write(), element.innerHTML = '...' 等方法动态地添加、删除或修改网页内容。
  5. 渲染最终页面：你看到的是经过JS执行和CSS美化后的页面。

JavaScript脚本（如书签脚本）是在第3步和第4步这个过程中运行的。

  • 当你的脚本运行时，它只能访问到当前已经解析完成并被JS修改过的DOM树（也就是你当前看到的页面结构）。
  • 它无法回溯到第1步，去获取那个最原始的、还没有被任何JS或CSS影响的HTML源码。

简单比喻： 想象一下你收到了一份乐高积木的说明书（原始HTML），你开始按照说明书一步步拼搭（浏览器解析），说明书中间有一页写着“请在这里自行添加一个红色的车头”（JS脚本执行），你的书签脚本就像是在你拼搭过程中，拍下了一张当前积木模型的照片，你拍到的照片里已经有那个红色的车头了，但你无法从这张照片里还原出那份没有“添加红色车头”指令的原始说明书。

小米手机 js 脚本取网页源码失败
（图片来源网络，侵删）

正确的解决方案（按推荐度排序）

使用浏览器开发者工具（最准确、最推荐）

这是获取网页最终生成源码（即经过JS执行后的DOM）的标准方法，虽然不是“原始”源码，但在绝大多数情况下，这就是你想要获取的、用户最终看到的页面结构。

步骤：

  1. 在小米手机上打开你想要分析的网页（Chrome 或 Mi 浏览器）。
  2. 在网页上任意位置长按，在弹出的菜单中选择 “检查” (Inspect) 或 “审查元素”。
  3. 这会打开浏览器的开发者工具，默认可能显示的是 Elements (元素) 面板。
  4. 在这个面板中，你看到的就是网页的实时DOM结构，你可以在这里找到所有元素,并查看它们的HTML代码。
  5. 关键一步：在 Elements 面板的任意一个元素上右键点击，选择 “Copy” -> “Copy outerHTML”。
  6. 这样，你就复制了该元素及其所有子元素的完整HTML代码到剪贴板,你可以粘贴到任何文本编辑器中查看。

优点：

  • 100%准确：获取的是浏览器当前渲染的真实DOM。
  • 功能强大：可以实时修改、调试,非常方便。
  • 无需额外工具：所有现代浏览器都内置此功能。

缺点：

小米手机 js 脚本取网页源码失败
（图片来源网络，侵删）
  • 不是“原始”HTML源码。
  • 在手机上操作比电脑稍显不便。

使用“书签脚本”获取 document.documentElement.outerHTML（最便捷的脚本方法）

虽然不能获取原始源码，但可以获取当前页面的完整DOM,这是书签脚本能做到的极限。

操作步骤：

  1. 创建书签脚本：

    • 在手机浏览器中,随便打开一个网页。
    • 进入书签管理页面,新建一个书签。
    • 将书签的名称改为你喜欢的，获取源码”。
    • 将网址/链接替换为下面的 JavaScript 代码：
    javascript:(function(){
  var html = document.documentElement.outerHTML;
  // 创建一个新的 Blob 对象来包含 HTML 内容
  var blob = new Blob([html], {type: 'text/html'});
  // 创建一个指向该 Blob 的 URL
  var url = URL.createObjectURL(blob);
  // 创建一个临时的 <a> 标签用于下载
  var a = document.createElement('a');
  a.href = url;
  a.download = 'page_source.html'; // 下载的文件名
  document.body.appendChild(a);
  a.click();
  // 清理
  setTimeout(function() {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 0);
})();

  2. 保存并使用：

    • 保存这个书签。
    • 以后当你想获取当前网页的源码时，只需要打开这个网页，然后点击你刚刚创建的“获取源码”书签。
    • 浏览器会自动下载一个名为 page_source.html 的文件,里面就包含了当前页面的完整DOM结构。

优点：

  • 一键操作,非常方便。
  • 适合快速保存当前页面的快照。

缺点：

  • 同样，获取的是经过JS渲染后的DOM,不是原始源码。

使用专业的爬虫工具（获取原始源码）

如果你必须获取服务器返回的原始HTML，那么JavaScript是无能为力的,你需要借助能抓取网络请求的工具。

推荐工具： Postman

操作步骤：

  1. 在小米手机的应用商店搜索并下载 Postman。
  2. 打开 Postman,新建一个请求。
  3. 在请求的 URL 输入框中，填入你想要抓取的网页地址（https://www.example.com）。
  4. 将请求方法设置为 GET。
  5. 点击蓝色的 "Send" 按钮。
  6. 在下方的 "Response" 标签页中，你看到的 "Body" 部分就是该网页的原始HTML源码,它未经任何JavaScript处理。

优点：

  • 能获取到真正的原始源码，这对于分析网页结构、进行数据抓取至关重要。
  • Postman 是一个功能强大的API调试工具,非常专业。

缺点：

  • 操作比前两种方法复杂。
  • 需要额外安装App。

总结与对比

方法 优点 缺点 适用场景
浏览器开发者工具 最终DOM (经JS渲染) 最准确、最标准，可实时调试 手机上操作不便 调试网页、分析当前页面结构
书签脚本 最终DOM (经JS渲染) 一键操作，非常便捷 不是原始源码，功能有限 快速保存当前页面快照
Postman等爬虫工具 原始HTML (服务器返回) 能获取真实原始源码 操作复杂，需额外工具 数据抓取、分析网页真实结构

给你的建议：

  • 如果你只是想看看当前页面是什么样的HTML，或者想复制一小段代码，用方案一（开发者工具）。
  • 如果你经常需要保存当前页面的完整快照，用方案二（书签脚本）。
  • 如果你的目的是写爬虫程序，或者发现网页内容是通过JS动态加载的，普通方法获取不到数据，必须用方案三（Postman等工具） 来获取原始源码,分析数据接口。