Flutter Webview如何只展示指定div/class 隐藏其余所有页面元素

核心思路 #

通过注入JavaScript先全局隐藏所有元素，再单独放开目标div及其所有父级元素的显示权限，避免逐个罗列待隐藏元素。

代码实现 #

场景1：.main_content是body的直接子元素 #

onPageFinished: (url) {
  _controller.evaluateJavascript('''
    // 隐藏body下所有直接子元素
    document.body.querySelectorAll(':scope > *').forEach(el => el.style.display = 'none');
    // 单独展示目标div
    document.querySelector('.main_content').style.display = 'block';
  ''');
},

场景2：.main_content嵌套在其他父元素内 #

如果目标div不是body的直接子元素，需要同步放开所有父级元素的显示权限，否则父元素处于隐藏状态时子元素也无法展示：

onPageFinished: (url) {
  _controller.evaluateJavascript('''
    // 隐藏所有页面元素
    document.body.querySelectorAll('*').forEach(el => el.style.display = 'none');
    // 定位目标元素
    const target = document.querySelector('.main_content');
    if (target) {
      // 显示目标元素本身
      target.style.display = 'block';
      // 遍历所有父级元素依次设置为显示
      let parent = target.parentElement;
      while(parent) {
        parent.style.display = 'block';
        parent = parent.parentElement;
      }
    }
  ''');
},

注意事项 #

• 建议把JS注入逻辑放到onPageFinished回调中执行，避免页面DOM未加载完成时找不到目标元素导致代码失效
• 如果页面存在多个main_content类的div，将querySelector替换为querySelectorAll遍历处理即可
• 如果需要保留目标元素原有布局属性，可以把display = 'block'替换为display = 'unset'

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