Android WebView 不显示图片 Instagram 嵌入

Question

我将 Instagram 帖子嵌入到 Android WebView，但图片未显示

这是截图 Instagram picture not show

这是我的 WebView 代码：

@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    WebView webView = (WebView) findViewById(R.id.webview);
    webView.setHorizontalScrollBarEnabled(false);
    webView.setVerticalScrollBarEnabled(false);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setUserAgentString(USER_AGENT);
    webView.loadDataWithBaseURL(null, TEXT_INSTAGRAM, "text/html", "utf-8", null);
}

private String TEXT_INSTAGRAM = "<blockquote class=\"instagram-media\" data-instgrm-captioned=\"\" data-instgrm-version=\"7\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.4537037037% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div> <p style=\" margin:8px 0 0 0; padding:0 4px;\"> <a href=\"https://www.instagram.com/p/BNYDM90gGJ3/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_blank\">A view</a></p> <p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\">A photo posted by Sarah (@sarahsnyder) on <time datetime=\"2016-11-29T01:34:08+00:00\" style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\">Nov 28, 2016 at 5:34pm PST</time></p></div></blockquote><script async=\"\" defer=\"\" src=\"http://platform.instagram.com/en_US/embeds.js\"></script>";

如何解决这个问题，以便嵌入的 Instagram 可以显示在 WebView 上

谢谢

Answer 1

你需要改变

<script async defer src="//platform.instagram.com/en_US/embeds.js"> 

到：

<script async defer src="https://platform.instagram.com/en_US/embeds.js">

在 TEXT_INSTAGRAM 中。

Answer 2

你必须改变

webView.loadDataWithBaseURL(null, TEXT_INSTAGRAM, "text/html", "utf-8", null);

到

webView.loadDataWithBaseURL("https://www.instagram.com", TEXT_INSTAGRAM, "text/html", "utf-8", null);

Answer 3

您已在 onCreate 方法下定义了您的 TEXT_INSTAGRAM。 请通过在 Oncreate 中定义它来改变它

@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

private String TEXT_INSTAGRAM = "<blockquote class=\"instagram-media\" data-instgrm-captioned=\"\" data-instgrm-version=\"7\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.4537037037% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div> <p style=\" margin:8px 0 0 0; padding:0 4px;\"> <a href=\"https://www.instagram.com/p/BNYDM90gGJ3/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_blank\">A view</a></p> <p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\">A photo posted by Sarah (@sarahsnyder) on <time datetime=\"2016-11-29T01:34:08+00:00\" style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\">Nov 28, 2016 at 5:34pm PST</time></p></div></blockquote><script async=\"\" defer=\"\" src=\"http://platform.instagram.com/en_US/embeds.js\"></script>";

WebView webView = (WebView) findViewById(R.id.webview);
webView.setHorizontalScrollBarEnabled(false);
webView.setVerticalScrollBarEnabled(false);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setUserAgentString(USER_AGENT);
webView.loadDataWithBaseURL(null, TEXT_INSTAGRAM, "text/html", "utf-8", null);
}