如何使用ExecuteScript获取浏览器view-source展示的完整网页源代码

document.documentElement.outerHTML获取的是当前页面上下文里实时渲染后的DOM快照，和view-source:展示的内容本质上不是同一个东西：

• 分页类页面的非当前页数据，是前端JS在初始页面加载完成后，通过异步接口按需拉取、动态插入DOM的，初始状态下DOM树里本身只存在当前页的10条数据，执行脚本读DOM自然只能拿到已渲染的部分
• 浏览器view-source:展示的是浏览器首次向服务器发起请求后，拿到的未被任何前端JS修改过的原始HTTP响应文本，和后续JS动态增删改后的DOM没有关联。仅靠在页面上下文执行JS读取DOM属性，永远无法拿到和view-source:完全一致的内容，这是浏览器的运行机制限制，和脚本写法无关。

根据实际需求二选一即可：

方案1：获取与view-source完全一致的原始页面源码 #

不要走读取DOM的逻辑，直接获取当前页请求的原始响应文本即可，所有主流嵌入式浏览器控件（WebView2、CEF、旧版IE WebBrowser等）都支持该能力，实现逻辑：

• 读取控件当前加载的完整页面URL
• 复用控件当前的会话上下文（自动携带Cookie、鉴权头、浏览器指纹，不会出现跨域、鉴权失败问题）发起请求，直接读取响应体文本即可
• 以常见的WebView2控件为例，实现代码如下：

// 获取当前访问的完整地址
string targetUrl = wbBrowser.Source.AbsoluteUri;
// 在页面上下文发起fetch请求拉取原始响应，优先读缓存匹配首次加载结果
string rawHtml = await wbBrowser.CoreWebView2.ExecuteScriptAsync(
    $$"""
    JSON.stringify(await (await fetch(window.location.href, {cache: 'force-cache'})).text())
    """
);
// 反序列化后拿到的rawHtml就和view-source展示的内容完全一致

提示：如果需要100%和浏览器首次加载的响应完全一致，可以开启控件的网络请求监听，在页面首次加载时直接缓存响应体，不需要额外发第二次请求，结果完全无偏差。

方案2：获取包含全量分页数据的完整渲染后DOM #

如果需要的是包含所有1000条表格数据的完整页面内容，不需要和view-source的原始文本一致，可以按以下逻辑实现：

• 先通过脚本模拟用户操作，自动触发分页组件的全量加载、逐页翻页逻辑
• 每触发一次加载就等待DOM渲染完成，直到所有1000条数据都插入到DOM树中
• 最后执行document.documentElement.outerHTML，拿到的就是包含全量渲染内容的DOM快照
• 注意：该方式拿到的内容是JS修改后的最终DOM，会包含前端动态插入的元素、修改后的属性值，和view-source展示的原始源码存在差异。

内容的提问来源于stack exchange，提问作者L. Pospisil