如何在 Android WebView 中正确嵌入推文？

Question

我对包含一些 HTML 数据的 WebView 有疑问（我不加载 URL，而是加载 HTML 中的自定义内容）。我用：

mWebView.loadData(mContent, "text/html; charset=utf-8", "utf-8");

在这个 HTML 代码 (mContent) 中，我有时有一个 Twitter 块引用嵌入代码，例如这个：

<blockquote class="twitter-tweet"><p>"Will Remote Play on the PS Vita be available for <a    style="color:#ff8600;" href="https://twitter.com/search?q=%23D3&src=hash">#D3</a> Ultimate Edition on <a style="color:#ff8600;" href="https://twitter.com/search?q=%23PS4&src=hash">#PS4</a>?" The answer is yes, and it's awesome! <a style="color:#ff8600;" href="http://t.co/Rg059nXZMF">pic.twitter.com/Rg059nXZMF</a></p> Diablo (@Diablo) <a style="color:#ff8600;" href="https://twitter.com/Diablo/statuses/400073137590530048">November 12, 2013</a></blockquote>

那么问题是什么？好吧，我的 WebView 只显示推文的文本，没有样式或图像。 （这段代码在我的 iOS 应用上运行良好。）

我在我的 WebView 上设置了 JavaScriptEnabled(true)，用 WebChromeClients 和 loadDataWithBaseURL 尝试了几件事，但我没能在我的 WebView 上很好地显示嵌入的推文。

有人知道我该怎么做吗？

Answer 1

我可以想到几种方法来解决这个问题：

您可以将对 loadData 的调用替换为：

loadDataWithBaseURL("https://twitter.com", mContent, "text/html", "UTF-8", null);

或者，您可以确保 html 字符串 (mContent) 的头部包含以下内容：

<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>

如果您无法控制传入的 HTML，您可以尝试使用 Jsoup 自行修改内容。

Document doc = Jsoup.parse(mContent);
doc.head().appendElement("script").attr("type", "text/javascript").attr("src", "https://platform.twitter.com/widgets.js");

// This is the html that includes the appropriate reference to Twitter's widgets.js script
String newHtml = doc.toString();

Answer 2

调用 loadDataWithBaseURL 而不是 loadData，但您不必使用 https://twitter.com。只需使用您的网站协议和域，如下所示：

loadDataWithBaseURL("https://mywebsite.com", mContent, "text/html", "UTF-8", null);

Answer 3

请查看此博客了解更多详情https://medium.com/@sajaljain98/embedded-tweets-in-android-webview-1363012746e3

private fun handleInWebiew() {
val value : String = "<blockquote class="twitter-tweet"><p lang="hi" dir="ltr">T 3644 -<br>छू लो तो चरण<br>अड़ा दो तो टांग<br>धंस जाए तो पैर<br>फिसल जाए तो पाँव<br>आगे बढ़ना हो तो कदम<br>राह में चिह्न छोड़े तो पद<br>प्रभु के हों तो पदुका *<br>गधे की पड़े तो *दुलत्ती<br>घुंघरु बांधो तो पग<br>खाने के लिए टंगड़ी<br>खेलने के लिए लंगड़ी<br><br>अंग्रेज़ी में only , LEG</p>&mdash; Amitabh Bachchan (@SrBachchan) <a href="https://twitter.com/SrBachchan/status/1307062341390020609?ref_src=twsrc%5Etfw">September 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"
val webView = findViewById<>(R.id.webView)
webView.visibility = View.INVISIBLE //so that we can show progress bar util every thing is loaded
val progressBar = findViewById<>(R.id.progress_loader)
if (!TextUtils.isEmpty(value)) {
    Log.d(TAG, "bindData: ")
    val webSettings = webView.settings
    webView.setWebChromeClient(WebChromeClient())
    webSettings.javaScriptEnabled = true
    webSettings.domStorageEnabled = true
    webSettings.loadsImagesAutomatically = true
    webSettings.defaultTextEncodingName = "UTF-8"
    webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL)
    webSettings.setUseWideViewPort(false)
    webView.setHorizontalScrollBarEnabled(false);
    webView.setVerticalScrollBarEnabled(false);
    webView.setScrollContainer(false);
    webView.setOnTouchListener { v: View?, event: MotionEvent -> event.action == MotionEvent.ACTION_MOVE }
    webView.webViewClient = object : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            Log.d(TAG, "onPageFinished: url $url")
//There is some delay in loading block-quote so avoid showing html without //loading js putting this fake delay
            Handler().postDelayed({
                if (progressBar != null) {
                    progressBar.visibility = View.GONE
                }
                webView.visibility = View.VISIBLE
            }, 3000)
        }

        override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
            super.onPageStarted(view, url, favicon)
        }


        override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
            Log.d(TAG, "shouldOverrideUrlLoading: url " + url)
            if (!TextUtils.isEmpty(url)) {
                val uri = Uri.parse(url)
                val twitter = Intent(Intent.ACTION_VIEW, uri)
                twitter.setPackage("com.twitter.android")
                try {
                    mContext.startActivity(twitter)
                } catch (e: ActivityNotFoundException) {
                    mContext.startActivity(Intent(Intent.ACTION_VIEW,
                            Uri.parse(url)))
                }
            }
            return true
        }
    }
    try {
        webView.loadDataWithBaseURL("https://twitter.com", value, "text/html", "utf-8", null)
    } catch (e: Exception) {
        e.printStackTrace()
    }
} else {
    if (progressBar != null)
        progressBar.visibility = View.GONE
}}