WebView加载完网页之后利用js进行网页刷新,解决webview显示图片适应所有的机型

android:

/**

* 自动以的webviewclient

* @author jwguo

*

*/

private class MyWebViewClient extends WebViewClient {

@Override

public void onPageFinished(WebView view, String url) {

// TODO Auto-generated method stub

view.loadUrl("javascript:var imgs = document.getElementsByTagName(‘img‘);for(var i = 0; i<imgs.length; i++){imgs[i].style.width = ‘100%‘;imgs[i].style.height = ‘auto‘;}");

}

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

// TODO Auto-generated method stub

view.loadUrl(url);

return true;

}

}

webview.setWebViewClient(new MyWebViewClient());

这样就可以了,注入的js代码有点web基础的人都看的懂,就是获取html中所有的img标签,然后添加个style宽100%,高度自适应而已。

IOS:

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

[HUD show:NO];

[HUD removeFromSuperview];

[webView stringByEvaluatingJavaScriptFromString:

@"javascript:var imgs = document.getElementsByTagName(‘img‘);"

"for(var i = 0; i<imgs.length; i++){"

"imgs[i].style.width = ‘100%‘;"

"imgs[i].style.height = ‘auto‘;}"];

}

上面就是正确的做法,当然了js代码不止这一种,你可以随意发挥,下面我们来看看其他的做法。

一:

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

比如这个,这个是网上最常见的解决方案,但是,这个并不好,因为这会缩放整个网站以便一屏幕宽度显示,这样字体一样会变小,那样虽然图片全屏显示了,但是文字看不到了,所以没有办法只缩小图片,而不处理文字,但是上面的方式是没有问题的。

二:

这个方法也是不好的。

对于IOS有这么一种处理方法,http://stackoverflow.com/questions/7085800/adjusting-font-size-and-image-in-uiwebview-ios

为了方便还在GFW内的同学,老外给的答案是:

(void)webViewDidFinishLoad:(UIWebView *)wView {
    [wView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName(‘body‘)[0].style.webkitTextSizeAdjust= ‘50%‘"];
    [wView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName(‘body‘)[0].style.zoom= ‘0.5‘"];
}

IOS代码看不懂也没有关系,我们可以大概理解下,就是拿到html的body标签,然后修改它的style属性,设置文字为原始的50%(你可以可以设置为100%),把缩放比例设置为0.5,那么显而易见的,我们既缩放了页面的其他元素,又没有改变文字的大小,这总可以了吧,但是会有下面两个问题:

1.zoom设置缩放为0.5这个比例是没有根据的,原始尺寸的0.5并不是适应我们屏幕的结果,可能在一些恰好的机器上是没有问题的,在分辨率或大或小的机器上,总还会显示不正确的。

2.这个方法在android上是无法复制的,我不知道到底是android的webview内核chrome(4.4之后修改了内核)或者webkit的问题,他正确解析了zoom属性,但是无法正确解析webkitTextSizeAdjust属性,那么结果是显而易见的,和方法一没什么区别。

其实方法二使用的就是我的解决方法,只不过使用js不太对而已。

时间: 2024-07-28 13:54:22

WebView加载完网页之后利用js进行网页刷新,解决webview显示图片适应所有的机型的相关文章

WebView加载本地Html文件并实现点击效果

Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行js和java的通信. 加载本地文件:webView.loadUrl("file:///android_asset/xxx.html"); 加载网页:webView.loadUrl("http://baidu.com"); 案例:(WebView加载本地Html并实现与J

WebView 加载网页和java 与js交互

[mw_shl_code=java,true]WebView是一个可以显示网页的控件.需求:通过WebView加载assets下的html文件.实现页面的缩放.向menu键添加:前进.后退和刷新,实现对网页的操作点击网页中的链接,仍然使用本WebView浏览器,而非调用系统的浏览器网页中有button,点击button,调用android的Toast点击WebView隐藏地址栏和button,点击menu键显示地址栏和button.WebView加载网页的方式WebView webview =

webview加载网页与全屏播放视频?

上篇我们大致了解了webview的一些属性,以及重要的方法.这篇我们就要一些案列来说明,一般webview最广泛的作用就是,加载一个html的网页(实现与js交互),,webview加载网页网页当中含有视频,webview文件下载等等. 首先我们来了解下webview是如何加载网页的?首先我们看下网页在家的效果? 代码也是比较简单 1 package cn.xiao.webviewplayvideo; 2 import android.app.Activity; 3 import android

Android WebView加载本地html并实现Java与JS交互

最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢.图片.css .js .html这些资源每个大概需要10-200ms ,一般都是30ms就ok了.不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析

Android Webview 加载外部html时选择加载本地的js,css等资源文件

在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片等资源会比较大,如果直接从网络加载会导致页面加载的比较慢,而且会消耗比较多的流量.所以这些文件应该放在assets里面同app打包. 要解决这个问题需要用到API 11(HONEYCOMB)提供的shouldInterceptRequest(WebView view, String url) 函数来加载本地资源.在API 21又将这个方法弃用了,是重载一个新的shouldInterceptRequest,

转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片等资源会比较大,如果直接从网络加载会导致页面加载的比较慢,而且会消耗比较多的流量.所以这些文件应该放在assets里面同app打包. 要解决这个问题需要用到API 11(HONEYCOMB)提供的shouldInterceptRequest(WebView view, String url) 函数来

网页图片很多时,加载完后再加载图片(defer:延迟加载)

图片影响页面加载速度,可以先加载完页面,再去加载图片. defer:告诉浏览器,这里面的js代码不影响网页脚本解析,可以解析完html脚本再执行这段js代码(个人理解). 网页代码:<img src="grey.gif" data-original="img/53a1820f5866c.png"/> Js代码: <script defer="defer" type="text/javascript" >

WebView加载网页

WebView加载网页 一.新建一个android项目   新建android项目,应用默认配置,其他地方不做修改. 二.修改MainActivity package cn.qiu.webview; import android.content.Intent; import android.net.Uri; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webki

Android中webview加载网页无法点击或滚动

由于工作忙,很久没写博客了,今天就先来一篇吧,这也是项目中遇到的问题. 如题,webview加载网页,但是网页内容无法滚动和点击,且网页内容也没有正常全部展示,主要是因为没有正确setting而已,解决访求如下: WebSettings s = webview.getSettings(); s.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS); s.setUseWideViewPort(true); s.setLoadW