I am load website with Flutter webview. But I want replace HTML element when it load. For example:

<span class="name">Replace text</span>

How to do?

I am load website with Flutter webview. But I want replace HTML element when it load. For example:

<span class="name">Replace text</span>

How to do?

• javascript
• html
• flutter
• dart
• flutterwebviewplugin

Share Improve this question Follow asked Sep 21, 2020 at 22:25 FlutterFirebaseFlutterFirebase 2,35377 gold badges3434 silver badges6868 bronze badges 2

• Hi, you could attach a handler to the load event document.addEventListener("DOMContentLoaded", function() { // do my replacement }); – IronMan Commented Sep 21, 2020 at 22:29
• @IronMan How to do with Flutter webview? – FlutterFirebase Commented Sep 21, 2020 at 23:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

So, it depends what library you are using to load your webview.

I have had some good success using webview_flutter_plus (https://pub.dev/packages/webview_flutter_plus).

With this, you just need to wait for your html to load and inject some javascript to modify whatever html you want.

Like this:

Widget build(BuildContext context) {
    return WebViewPlus(
        initialUrl: myUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewPlusController webViewController) {
            _webViewController = webViewController;
        },
        onPageFinished: (String url) {
            _webViewController.evaluateJavascript('document.querySelector(".name").innerHTML = "new text";');
        }
   }
}

try this code in the init state :

 @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (String url) async {
            // Wait for the page and execute JavaScript to manipulate the DOM
            await controller.runJavaScript(
              """
              (function() {
                // Ensure DOM is loaded
                document.addEventListener('DOMContentLoaded', function() {
                  // Find the element
                  var element = document.querySelector('.name');
                  if (element) {
                    // Replace the content
                    element.textContent = 'Updated text';
                  }
                });
              })();
              """
            );
          },
        ),
      )
      ..loadRequest(Uri.parse('https://www.website.'));
  }