前端做混合开发时 webview中打开h5页面图片不显示解决方法和原理

 在做混合开发过程中,webview打开h5页面时,若h5页面是https访问的,而内部图片资源是http内容 就会存在图片不显示的问题 ;

 问题分析:在https页面请求http内容属于跨域的一种,请求了混合资源;

      自测时,在浏览器中显示正常,实际上在控制台中已经打印警告用户了(如下),

Mixed Content: The page at 'https://****' was loaded over HTTPS, but requested an insecure image 'http://***.png'. This content should also be served over HTTPS.

      在Security内部 也显示了Non-secure origins 的内容,但是资源可以正常显示。而在webview中直接就不加载显示该不安全资源,若想继续加载该资源需要webview进行设置,去打开该Mixed Content

解决方案:1在android端去设置;

mWebview.getSettings().setJavaScriptEnabled(true);//启用js 
mWebview.getSettings().setBlockNetworkImage(false);//解决图片不显示 
// 解决混合资源的加载
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP) 
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLAW); 

            2 同源策略,不会存在该问题

猜你喜欢

转载自www.cnblogs.com/xhliang/p/12889095.html