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 (@sarahfuckingsnyder) 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

Thanks

Answer 1

Вы определили свой TEXT_INSTAGRAM ниже метода onCreate. Пожалуйста, измените это, определив его в 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 (@sarahfuckingsnyder) 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); 
} 

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

Вы должны изменить

<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.