如何在 Flutter webview 中操作 HTML？

Posted 2023-02-23

【中文标题】如何在 Flutter webview 中操作 HTML？

【英文标题】：How to manipulate HTML in Flutter webview?

【发布时间】：2021-01-08 01:07:50

【问题描述】：

我正在使用 Flutter webview 加载网站。但我想在加载时替换 html 元素。例如：

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

怎么办？

【问题讨论】：

您好，您可以将处理程序附加到加载事件document.addEventListener("DOMContentLoaded", function() // do my replacement );

@IronMan Flutter webview 怎么办？

【参考方案1】：

所以，这取决于你使用什么库来加载你的 webview。

我使用webview_flutter_plus (https://pub.dev/packages/webview_flutter_plus) 取得了一些成功。

有了这个，你只需要等待你的 html 加载并注入一些 javascript 来修改你想要的任何 html。

像这样：

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";');
        
   

【讨论】：

亲爱的@Didier Prophete 我使用这种方式，但似乎评估jave脚本需要很长时间我可以做些什么

是的。事实是，在 Flutter 中绑定原生应用程序中的 webview 确实需要一些时间（比如半秒）。在那之后，我认为 js 评估很好，但最初的时间是一个巨大的痛苦。不确定在颤振本身改善 webview 性能之前我们可以做很多事情（而且，我不确定颤振可以做任何事情。可能只是 webview 是一个昂贵的实例化类......）跨度>

亲爱的有没有办法让我在评估之前不显示 webview，我的意思是评估发生在 onpagefinished 回调上，它自己需要一些时间来触发

是的@kikicoder，这正是我在自己的代码中所做的。我基本上隐藏了 webview（我把它放在一个堆栈中，在一个启动页面下面）直到 onPageFinished 被调用......