如何在VB.NET的WebView2中获取动态加载HTML元素的文本？

问题本质 #

目标元素不在主页面DATA.HTML的DOM中，而是存在于主页面加载的子页面（如iframe/frame承载的default.html）内，直接调用主页面document无法定位到该元素。

具体解决方法 #

1. 定位承载子页面的框架 #

先通过脚本找到主页面中加载default.html的框架元素：

' 遍历所有框架找到目标子页面
Dim frameLocatorScript As String = "
Array.from(document.querySelectorAll('iframe, frame')).find(frame => frame.src.includes('default.html'));
"
Dim frameInfo As String = Await WebView21.ExecuteScriptAsync(frameLocatorScript)

若已知框架的id或name，可直接精准定位：

Dim frameLocatorScript As String = "document.getElementById('target-frame-id') || document.getElementsByName('target-frame-name')[0];"
Dim frameInfo As String = Await WebView21.ExecuteScriptAsync(frameLocatorScript)

2. 访问子页面DOM获取元素 #

找到框架后，通过contentDocument访问子页面的DOM结构，再获取目标元素：

Dim getFirstNameScript As String = "
const targetFrame = Array.from(document.querySelectorAll('iframe, frame')).find(f => f.src.includes('default.html'));
targetFrame ? targetFrame.contentDocument.getElementById('m.first_name').textContent : null;
"
Dim firstNameText As String = Await WebView21.ExecuteScriptAsync(getFirstNameScript)
MessageBox.Show("First name: """ & firstNameText & """.")

3. 处理动态加载延迟 #

如果子页面是异步加载的，需等待其加载完成后再执行获取逻辑，可通过Promise实现等待：

Dim waitAndFetchScript As String = "
new Promise(resolve => {
  const checkReady = () => {
    const frame = Array.from(document.querySelectorAll('iframe, frame')).find(f => f.src.includes('default.html'));
    if (frame?.contentDocument?.getElementById('m.first_name')) {
      resolve(frame.contentDocument.getElementById('m.first_name').textContent);
    } else {
      setTimeout(checkReady, 500);
    }
  };
  checkReady();
});
"
Dim firstNameText As String = Await WebView21.ExecuteScriptAsync(waitAndFetchScript)
MessageBox.Show("First name: """ & firstNameText & """.")

4. 跨源限制说明 #

若主页面与子页面不同源，浏览器同源策略会禁止访问子页面的contentDocument，此时需确保页面同源，或通过页面提供的接口间接获取数据。

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