Flutter WebView自动填充登录信息失败求助（webview_flutter）

Hey there, let's tackle that JavaScript error you're hitting and get your auto-login working smoothly. The error message is clear: your code can't find the CustomerEmail element (it's returning null), so trying to set email.value throws an exception. Here are the most common fixes:

1. Wait for the page to fully load before running your JS #

The #1 culprit here is usually running the JavaScript before the page's DOM has finished loading. WebView might fire your code while the login form is still being rendered. Use the onPageFinished callback to ensure the page is ready:

WebView(
  initialUrl: "your_login_page_url_here",
  onWebViewCreated: (WebViewController controller) {
    _webViewController = controller;
  },
  onPageFinished: (String url) {
    // Now the page is fully loaded—run your auto-fill code
    _webViewController?.evaluateJavascript('''
      // Add checks to avoid null errors
      const emailField = document.getElementById("CustomerEmail");
      const passwordField = document.getElementById("CustomerPassword");
      
      if (emailField && passwordField) {
        emailField.value = "user@gmail.com";
        passwordField.value = "test123";
        
        // Submit the login form if needed
        const loginForm = emailField.closest("form");
        if (loginForm) {
          loginForm.submit();
        }
      } else {
        console.log("Could not find email/password fields—double-check IDs!");
      }
    ''');
  },
  // Don't forget to enable JavaScript
  javascriptMode: JavascriptMode.unrestricted,
)

2. Double-check the element IDs are correct #

HTML IDs are case-sensitive, so it's easy to misspell or use the wrong casing. Open your login page in Chrome, right-click the email input, and select "Inspect" to confirm the exact id attribute. For example, maybe it's customerEmail (lowercase c) instead of CustomerEmail.

3. Handle dynamically-rendered forms #

If the login form is built with a framework like React, Vue, or loads asynchronously via JS, the elements might not exist even after onPageFinished fires. Use a helper function to wait for the elements to appear:

// Inside onPageFinished
_webViewController?.evaluateJavascript('''
  function waitForElement(elementId, callback) {
    const interval = setInterval(() => {
      const element = document.getElementById(elementId);
      if (element) {
        clearInterval(interval);
        callback(element);
      }
    }, 100); // Check every 100ms until the element exists
  }

  // Wait for both fields before filling them
  waitForElement("CustomerEmail", (emailField) => {
    waitForElement("CustomerPassword", (passwordField) => {
      emailField.value = "user@gmail.com";
      passwordField.value = "test123";
      
      const loginForm = emailField.closest("form");
      if (loginForm) loginForm.submit();
    });
  });
''');

4. Check if the form is inside an iframe #

If the login form is nested inside an <iframe>, your current JS won't find the elements—you need to access the iframe's document first:

// Inside onPageFinished
_webViewController?.evaluateJavascript('''
  const loginIframe = document.querySelector("iframe");
  if (loginIframe) {
    const iframeDoc = loginIframe.contentDocument || loginIframe.contentWindow.document;
    
    const emailField = iframeDoc.getElementById("CustomerEmail");
    const passwordField = iframeDoc.getElementById("CustomerPassword");
    
    if (emailField && passwordField) {
      emailField.value = "user@gmail.com";
      passwordField.value = "test123";
      const loginForm = emailField.closest("form");
      if (loginForm) loginForm.submit();
    }
  }
''');

Start with the first fix (waiting for onPageFinished) since that's the most common issue. If that doesn't work, verify the element IDs next. Happy coding!

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