Flutter使用WebView插件加载网页

2020-07-25
webview_flutter: 官方提供的WebView插件
final Completer<WebViewController> _controller =
    Completer<WebViewController>();
double _webViewHeight = 200;

WebView(
    initialUrl: 'https://www.baidu.com',
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) async {
        _controller.complete(webViewController);
        //加载html文件
        // String contentBase64 =
        //     base64Encode(const Utf8Encoder().convert(htmlPage));
        // await webViewController.loadUrl('data:text/html;base64,$contentBase64');
    },
    //注册js channel
    javascriptChannels: <JavascriptChannel>[
        _invokeJavascriptChannel(context),
    ].toSet(),
    //设置拦截, 若request.url != current_url则拦截 不做响应
    navigationDelegate: (NavigationRequest request) {
        if (request.url != 'current_url') {
            toastInfo(msg: request.url);
            return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
    },
    //当页面开始加载时调用
    onPageStarted: (String url) {
        // Timer(Duration(seconds: 1), () {
        //   setState(() {
        //     _isPageFinished = true;
        //   });
        // _removeAd();
        // _getViewHeight();
        // });
    },
    //当页面加载完毕时调用
    onPageFinished: (String url) {
        _getWebViewHeight();
        setState(() {
            _isPageFinished = true;
        });
    },
    gestureNavigationEnabled: true,
)
    
// 注册js回调
JavascriptChannel _invokeJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Invoke',
        onMessageReceived: (JavascriptMessage message) {
            print(message.message);
            var webHeight = double.parse(message.message);
            if (webHeight != null) {
                setState(() {
                    _webViewHeight = webHeight;
                });
            }
        });
}

// 获取页面高度
_getWebViewHeight() async {
    await (await _controller.future)?.evaluateJavascript('''
        try {
          // Invoke.postMessage([document.body.clientHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight]);
          let scrollHeight = document.documentElement.scrollHeight;
          if (scrollHeight) {
            Invoke.postMessage(scrollHeight);
          }
        } catch {}
        ''');
}

// 获取web浏览器像素密度
_getWebViewDevicePixelRatio() async {
    await (await _controller.future)?.evaluateJavascript('''
        try {
          Invoke.postMessage(window.devicePixelRatio);
        } catch {}
        ''');
}