TradingView Widget在Android 6.0系统WebView中无法加载问题

核心原因 #

该兼容问题由Android 6.0（API 23）自带系统WebView内核（基于Chromium 44版本）的默认限制，以及TradingView JS库对旧内核的兼容性要求共同导致，业务逻辑本身没有问题。

具体缺失配置及修复方案 #

你需要补充以下WebView配置，同时替换资源加载方式：

1. 替换loadData为loadDataWithBaseURL
   Android 6.0上使用loadData加载本地HTML字符串时，默认会拦截HTML内部引用的远程跨域资源，你引入的TradingView官方JS会被跨域规则拦截，修改加载方式指定基地址即可解决：

// 替换原有loadData行
webView.loadDataWithBaseURL("https://tradingview.com", data, "text/html", "utf-8", null);

2. 补充WebView必要权限配置
   Android 6.0默认关闭了DOM存储、混合内容加载等TradingView渲染必备的权限，你需要在开启JS权限后补充以下配置：

webView.getSettings().setDomStorageEnabled(true); // 开启DOM存储，TradingView需要本地存储配置信息
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); // 允许JS触发窗口操作
// 允许混合内容加载，避免TradingView内部资源加载被拦截
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

3. 极端兼容方案
   如果补充上述配置后仍然无法正常加载，说明TradingView最新的JS库已经放弃了对Chromium 44内核的语法兼容，你可以引入CrossWalk内核替代系统WebView，即可完美兼容Android 6.0及更低版本系统。

修改后完整代码示例 #

WebView webView = findViewById(R.id.webviewer);
String symbol = getIntent().getStringExtra("symbol");
String interval = getIntent().getStringExtra("interval");

String data = "<!-- TradingView Widget BEGIN -->\n" +
                "<div class=\"tradingview-widget-container\">\n" +
                "  <div id=\"tradingview_357eb\"></div>\n" +
                "  <div class=\"tradingview-widget-copyright\"><a href=\"https://tr.tradingview.com/symbols/"+symbol+"/?exchange=BINANCE\" rel=\"noopener\" target=\"_blank\"><span class=\"blue-text\">"+symbol+" Chart</span></a></div>\n" +
                "  <script type=\"text/javascript\" src=\"https://s3.tradingview.com/tv.js\"></script>\n" +
                "  <script type=\"text/javascript\">\n" +
                "  new TradingView.widget(\n" +
                "  {\n" +
                "  \"width\": 300,\n" +
                "  \"height\": 200,\n" +
                "  \"symbol\": \"BINANCE:"+symbol+"\",\n" +
                "  \"interval\": \""+interval+"\",\n" +
                "  \"timezone\": \"Europe/Istanbul\",\n" +
                "  \"theme\": \"light\",\n" +
                "  \"style\": \"1\",\n" +
                "  \"locale\": \"en\",\n" +
                "  \"toolbar_bg\": \"#f1f3f6\",\n" +
                "  \"enable_publishing\": false,\n" +
                "  \"hide_side_toolbar\": false,\n" +
                "  \"save_image\": false,\n" +
                "  \"studies\": [\n" +
                "    \"BB@tv-basicstudies\",\n" +
                "    \"RSI@tv-basicstudies\",\n" +
                "    \"StochasticRSI@tv-basicstudies\"\n" +
                "  ],\n" +
                "  \"container_id\": \"tradingview_357eb\"\n" +
                "}\n" +
                "  );\n" +
                "  </script>\n" +
                "</div>\n" +
                "<!-- TradingView Widget END -->";

// 补充配置
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
// 替换加载方式
webView.loadDataWithBaseURL("https://tradingview.com", data, "text/html", "utf-8", null);

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