webview_flutter使用evaluateJavascript无法修改form内元素样式怎么办

问题根因 #

你当前执行JavaScript的时机错误：onPageStarted回调仅在页面开始加载时触发，此时页面DOM树尚未完全构建完成，form标签内部的元素还没有被浏览器解析渲染，自然无法被选中和修改样式。

解决方案 #

1. 调整JS执行时机 #

将evaluateJavascript的调用逻辑从onPageStarted移动到onPageFinished回调中，该回调会在页面所有DOM元素加载完成后触发，此时可以正常选中所有页面元素。

2. 优化JS写法避免报错 #

直接通过下标[0]获取元素时，如果目标元素尚未存在会抛出JS异常，打断后续代码执行，建议增加存在性判断。同时补充form内部元素的样式修改逻辑即可实现深色主题适配。

修改后完整代码示例 #

WebView(
  initialUrl: 'https://dme.com.sg/index.php?dispatch=auth.login_form',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (controller) {
    _controller = controller;
  },
  // 替换为onPageFinished回调
  onPageFinished: (url) {
    _controller.evaluateJavascript('''
      // 原有隐藏头部尾部的逻辑，增加存在性判断
      const topPanel = document.getElementsByClassName('tygh-top-panel clearfix')[0];
      if(topPanel) topPanel.style.display='none';
      
      const header1 = document.getElementsByClassName('tygh-header clearfix')[0];
      if(header1) header1.style.display='none';
      
      const header2 = document.getElementsByClassName('tygh-header')[0];
      if(header2) header2.style.display='none';
      
      const footer = document.getElementsByClassName('tygh-footer')[0];
      if(footer) footer.style.display='none';
      
      const authGrid = document.getElementsByClassName('auth-information-grid')[0];
      if(authGrid) authGrid.style.display='none';
      
      const breadcrumbs = document.getElementsByClassName('ty-breadcrumbs clearfix')[0];
      if(breadcrumbs) breadcrumbs.style.display = 'none';
      
      const contentGrid = document.getElementsByClassName('container-fluid  content-grid')[0];
      if(contentGrid) contentGrid.style.background = 'black';
      
      const title = document.getElementsByClassName('ty-mainbox-title')[0];
      if(title) title.style.color = 'pink';
      
      const btnContainer = document.getElementsByClassName('buttons-container clearfix')[0];
      if(btnContainer) btnContainer.style.display = 'none';
      
      // 新增form内部元素深色主题适配逻辑
      // 修改表单容器背景
      const form = document.getElementsByClassName('ty-login-form')[0];
      if(form) form.style.background = '#1a1a1a';
      
      // 修改输入框样式
      const inputs = document.querySelectorAll('.ty-login-form input');
      inputs.forEach(input => {
        input.style.background = '#333';
        input.style.color = '#fff';
        input.style.borderColor = '#555';
      });
      
      // 修改标签文字颜色
      const labels = document.querySelectorAll('.ty-login-form label');
      labels.forEach(label => {
        label.style.color = '#fff';
      });
      
      // 修改提交按钮样式
      const submitBtn = document.querySelector('.ty-login-form .ty-btn__login');
      if(submitBtn) {
        submitBtn.style.background = '#444';
        submitBtn.style.color = '#fff';
        submitBtn.style.borderColor = '#666';
      }
    ''');
  },
),

补充说明 #

如果页面存在异步渲染的动态内容，即使onPageFinished触发后元素还未加载，可以在JS代码中增加50-100ms的延时执行，或者使用MutationObserver监听DOM变化后再执行样式修改逻辑。

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