Flutter WebView注入JavaScript时的内容缺失与代码执行异常求助

你好，我来帮你拆解并解决遇到的几个问题：

一、为什么添加return会导致后续脚本不执行？ #

这是JavaScript的基础语法特性——return语句会直接终止当前脚本/函数的执行流程，一旦代码执行到return，后面的.append()和.remove()逻辑就会被直接跳过。你看到的“能拿到完整HTML”只是return返回了页面内容，但代价是中断了后续的DOM操作。如果需要获取页面内容，应该用Flutter WebView提供的runJavascriptReturningResultAPI来获取返回值，而不是在脚本里加return打断执行。

二、初始脚本无法获取完整内容的核心原因 #

你提到浏览器检查元素里能看到目标内容，但脚本拿不到，大概率是页面内容是动态渲染的（比如通过AJAX异步加载、Vue/React等框架动态生成DOM）。onPageFinished回调触发时，仅代表页面的初始HTML加载完成，那些动态生成的内容可能还没被渲染到DOM树里。

解决这个问题的关键是等待目标元素完全加载后再执行脚本，这里推荐用MutationObserver监听DOM变化，直到目标元素出现：

await _controller.runJavascript("""
// 创建DOM变化监听器
const observer = new MutationObserver((mutations, obs) => {
  // 确认选择器正确性：如果是class要加.，ID要加#，自定义标签才直接写
  const siteContent = document.querySelector('site-content');
  const sideBar = document.querySelector('.main-sidebar');
  if (siteContent && sideBar) {
    // 执行你的DOM操作
    document.body.innerHTML = "";
    document.body.append(siteContent);
    sideBar.remove();
    obs.disconnect(); // 完成操作后停止监听
  }
});
// 监听body及其子树的元素变化
observer.observe(document.body, { childList: true, subtree: true });
""");

另外要注意：你写的querySelector('site-content')需要确认选择器是否正确——如果目标是class名为site-content的元素，应该写成.site-content；如果是ID则是#site-content，只有当它是自定义HTML标签（比如<site-content>）时才直接写site-content，选择器错误也会导致拿不到元素。

三、关于Content Security Policy（CSP）的错误 #

你看到的Refused to load plugin data from '' because it violates the following Content Security Policy directive: "object-src 'none'".这个错误，是页面的CSP策略禁止加载插件（比如Flash、Java Applet这类老旧插件），和你遇到的DOM内容缺失、脚本执行问题没有直接关系，可以暂时忽略它。

总结调整方案 #

• 去掉脚本里的return语句，保证所有DOM操作逻辑能完整执行
• 仔细确认选择器的写法（class/ID/标签的语法区别）
• 用MutationObserver处理动态加载的内容，确保目标元素存在后再执行操作

备注：内容来源于stack exchange，提问作者sarah. isml