我有一个 div id 作为 campaign-nav 和 class id 作为 campaign-term-list 和
我不想显示页眉、菜单和页脚。在 Android 中，我可以使用以下代码:(找到 WebViewController android 代码:Display a part of the webpage on the webview android)
如何在Flutter中使用WebViewController插件显示网页的一部分？
view.getSettings().setJavaScriptEnabled(true);
view.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String URL)
{
view.loadUrl("javascript:(function() { " +
"var head = document.getElementsByClassName('header')[0].style.display='none'; " +
"var head = document.getElementsByClassName('blog-sidebar')[0].style.display='none'; " +
"var head = document.getElementsByClassName('footer-container')[0].style.display='none'; " +
"})()");
}
});
view.loadUrl("your url");
更新: Flutter 示例有；
final Completer<WebViewController> _controller = Completer<WebViewController>();
他们将 _controller 用作;
new WebView(
initialUrl:
'h****s://mysite.com/campaing/',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
javascriptChannels: <JavascriptChannel>[
_toasterJavascriptChannel(context),
].toSet(),
onPageFinished: (String url) {
print('Page finished loading: $url');
//Here is I put a boolean variable so I can show a progress indicator
setState(() {
_loadedPage = true;
});
},
),
更新 2: 在我的网页中，我有如下所示的页脚。
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="footer-menu">
我把你的代码放在下面 _controller.complete(webViewController);部分。但仍然显示页脚。
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
webViewController.evaluateJavascript("document.getElementsByClassName('footer-menu')[0].style.display='none';");
},
当我尝试将 webViewController.evaluateJavascript 放入 onPageFinished 部分时，它找不到“.evaluateJavascript”部分。
更新 3: 完整代码:(不工作)
new WebView(
initialUrl: 'https://stackoverflow.com',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller){
_myController = controller;
},
javascriptChannels: <JavascriptChannel>[
_toasterJavascriptChannel(context),
].toSet(),
onPageFinished: (url){
print('Page finished loading: $url');
_myController.evaluateJavascript("document.getElementsByClassName('header')[0].style.display='none';");
setState(() {
_loadedPage = true;
});
},
),
最佳答案
到目前为止，我自己还没有完成，但正如 webview_flutter 的官方 API 中所述包，您应该能够通过调用 WebViewController 提供的 evaluateJavascript 方法来实现此目的，如 here 所示.
WebView(
initialUrl: 'https://stackoverflow.com',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
// here you can access the WebViewController
controller.evaluateJavascript("document.getElementsByClassName('header')[0].style.display='none';");
},
...
我使用了您代码段中的示例 JavaScript 代码作为引用。如 API 中所述，您可能需要等到 WebView 运行网站上的所有 JavaScript 代码，然后再运行您自己的代码，以确保所有内容都已加载并且元素您尝试找到存在。为此，WebView 提供了一个 onPageFinished 回调:
...
WebViewController _controller;
...
WebView(
initialUrl: 'https://stackoverflow.com',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
_controller = controller;
},
onPageFinished: (url) {
_controller.evaluateJavascript("document.getElementsByClassName('header')[0].style.display='none';");
},
...
关于webview - 如何在 Flutter 中使用 WebViewController 插件显示网页的一部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56180481/