如何在Flutter的webview_flutter中读取网页元数据获取页面lang标签

webview_flutter本身没有直接提供读取网页DOM属性的API，你可以通过注入JS读取DOM的方式实现，具体操作如下：

前置准备 #

• 确保webview_flutter版本 >= 3.0.0，旧版本API存在差异需要适配
• 必须开启WebView的JS执行权限，否则无法运行JS代码读取DOM

核心实现步骤 #

• 初始化WebViewController时配置JS权限和页面加载完成回调
• 在页面加载完成的回调中执行JS代码，读取<html>根标签的lang属性
• 接收JS返回的结果，处理业务逻辑

可直接运行的代码示例 #

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebviewLangDemo extends StatefulWidget {
  const WebviewLangDemo({super.key});

  @override
  State<WebviewLangDemo> createState() => _WebviewLangDemoState();
}

class _WebviewLangDemoState extends State<WebviewLangDemo> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      // 开启JS执行权限
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          // 页面加载完成后执行读取操作，避免DOM未加载导致返回空
          onPageFinished: (String? url) async {
            if (url == null) return;
            // 执行JS读取lang属性，支持降级读取浏览器语言
            final jsResult = await _controller.runJavaScriptReturningResult(
              "document.documentElement.lang || navigator.language"
            );
            final String pageLang = jsResult.toString();
            // 此处写拿到语言后的业务逻辑
            debugPrint("当前网页语言为：$pageLang");
          },
        ),
      )
      ..loadRequest(Uri.parse('你要加载的网页地址'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: _controller),
    );
  }
}

常见问题处理 #

• 如果拿到的lang属性是空值：绝大多数情况是网页本身没有给<html>标签设置lang属性，上述代码已经加了降级逻辑，会读取浏览器环境的语言作为兜底
• 旧版本webview_flutter适配：如果你使用的是2.x及更早版本，把runJavaScriptReturningResult替换为evaluateJavascript，返回结果需要手动解析JSON字符串
• 读取iframe内页面的lang：如果需要获取嵌入iframe的页面语言，需要修改JS代码为对应iframe的DOM读取逻辑

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