在android中实现webview与javascript之间的交互

在android开发项目中,采用了webview控件和微网站。该项目中需要实现一个分享功能,而且是需要用javascript来调用android中定义好的分享功能,所以需要实现webview与javascript之间的交互。

一. 先说说android中webview控件如何调用javascript代码?

其实android中webview控件调用javascript方法还是比较简单,只需要设置webview支持javascript,然后用loadUrl调用javascript方法即可。实现代码如下:

this.appView.getSettings().setJavaScriptEnabled(true);

 javascript方法:

function showDialog(info){
         alert(info);
}

 android代码

this.appView.loadUrl("javascript:showDialog('jhonse')");

 二.  javascript调用android中自定义好的方法(例如: 分享)

需要给webview控件添加addJavascriptInterface方法,而这个就类似于初始化一个类对象,以及类对象里的方法。这个类对象就提供给javascript来调用。请看实现代码:

this.appView.addJavascriptInterface(new Object() {
			@JavascriptInterface
			public void OnClick(String Subject, String Text) {
				Intent intent = new Intent(Intent.ACTION_SEND);
				intent.setType("text/plain");
				intent.putExtra(Intent.EXTRA_SUBJECT, Subject);
				intent.putExtra(Intent.EXTRA_TEXT, Text);
				intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
				startActivity(Intent.createChooser(intent, "分享"));
			}
		}, "JShare");

javascript调用自定义好的JShare对象。

if(window.JShare){
       $("#icon-share").click(function(){
		window.JShare.OnClick("分享",document.title+" "+document.URL);
	});
}

 效果图:

20141209010514

【JavaScript】获取offsetTop和offsetLeft值(兼容性)

最近用js获取offsetTop和offsetLeft的值,来实现图片放大镜的功能。遇到一个很纠结的问题,谷歌、火狐浏览器都可以通过获取元素对象,然后再获取offsetTop、offsetLeft的值,代码如下:

var div = document.getElementById("div");
var value = div.offsetTop;

就可以获到该div的offsetTop和offsetLeft值,但是IE、360浏览器就是获取不到该值,总是显示其值为0。

解决方法如下:

function offsetTop( elements ){ 
    var top = elements.offsetTop; 
    var parent = elements.offsetParent; 
    while( parent !== null ){ 
        top += parent.offsetTop; 
        parent = parent.offsetParent; 
    }
    return top; 
}; 
function offsetLeft( elements ){ 
    var left = elements.offsetLeft; 
    var parent = elements.offsetParent; 
    while( parent !== null ){ 
        left += parent.offsetLeft; 
        parent = parent.offsetParent; 
    }
    return left; 
};

通过自定义的函数就可以获取了。

【javascript】页面跳转和打开新窗口方法

第一种:
<script language=“javascript” type=“text/javascript”>
window.location.href=
“http://blog.jhonse.com/login.php?backurl=”+window.location.href;
</script>

第二种:
<script language=“javascript”>
alert(
“返回”);
window.history.back(-1);
</script>

第三种:
<script language=“javascript”>
window.navigate(
“index.php”);
</script>

第四种:
<script language=“JavaScript”>
self.location=’index.htm’;
</script>

第五种:
<script language=“javascript”>
alert(
“非法访问!”);
top.location=’index.html;
</script>

1.在原来的窗体中直接跳转用

window.location.href=”你所要跳转的页面”;
2、在新窗体中打开页面用:
window.open(‘你所要跳转的页面’);

window.history.back(-1);返回上一页

3、一些用法
按钮式:
<INPUT name=”pclog” type=”button” value=”/GO” onClick=”location.href=’连接地址'”>
链接式:<a href=”javascript:history.go(-1)”>返回上一页</a>
<a href=”<%=Request.ServerVariables(“HTTP_REFERER”)%>”>返回上一页</a>
直接跳转式:
<script>window.location.href=’连接地址’;</script>
开新窗口:
<a href=”/javascript:” onClick=”window.open(‘http://blog.jhonse.com’,”,’height=500,width=611,scrollbars=yes,status =yes’)”>123</a>

<SCRIPT>
<!–
window.open

(‘dollare.html’,’newwindow’,’height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,

resizable=no,location=no, status=no’)
//写成一行
–>
</SCRIPT>

脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工

具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。请对照。
上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。

四、各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。

参数 | 取值范围 | 说明

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

=====================================================

【1、最基本的弹出窗口代码】
其实代码非常简单:

<SCRIPT LANGUAGE=”javascript”>
<!–
window.open (‘index.html’)
–>
</SCRIPT>
因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE=”javascript”>标签和</script>之间

。<!– 和 –>是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养

成这个好习惯啊。
Window.open (‘index.html’) 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,

前面应写明路径,绝对路径和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行

,尤其是页面代码长,又想使页面早点弹出就尽量往前放。

【2、经过设置后的弹出窗口】

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。

<SCRIPT LANGUAGE=”javascript”>
<!–
window.open (‘dollare.html’, ‘newwindow’, ‘height=100, width=400, top=0,left=0, toolbar=no,

menubar=no, scrollbars=no, resizable=no,location=no, status=no’)
//写成一行
–>
</SCRIPT>
参数解释:
<SCRIPT LANGUAGE=”javascript”> js脚本开始;
window.open 弹出新窗口的命令;
‘page.html’ 弹出窗口的文件名;
‘newwindow’ 弹出窗口的名字(不是文件名),非必须,可用空’代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;

width=250,toolbar=no,scrollbars=”+scroll+”,menubar=no”);
//写成一行
OpenWindow.document.write(“<TITLE>jhonse博客</TITLE>”)
OpenWindow.document.write(“<BODY BGCOLOR=#ffffff>”)
OpenWindow.document.write(“<h1>Hello!</h1>”)
OpenWindow.document.write(“New window opened!<br> is Good”)
OpenWindow.document.write(“</BODY>”)
OpenWindow.document.write(“</HTML>”)
OpenWindow.document.close()}
</SCRIPT>
</head>
<body>
<a href=”#” onclick=”openwin()”>打开一个窗口</a>
<input type=”button” onclick=”openwin()” value=”打开窗口”>
</body>
</html>
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

【9、终极应用–弹出的窗口之Cookie控制】
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(有解决的办法吗?Yes! 😉 Follow me. 我们使用cookie来控制一下就可以了。首先,将如下代码加入主页面HTML的<HEAD>区:
<script>
function openwin()
{window.open(“page.html”,””,”width=200,height=200″)}
function get_cookie(Name)
{var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie(‘popped’)==’){
openwin()
document.cookie=”popped=yes”
}
}
</script>
然后,用<body onload=”loadpopup()”>(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

【javascript】字符串函数

JS自带函数
concat
将两个或多个字符的文本组合起来,返回一个新的字符串。
var a = “hello”;
var b = “,world”;
var c = a.concat(b);
alert(c);
//c = “hello,world”
indexOf
返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。
var index1 = a.indexOf(“l”);
//index1 = 2
var index2 = a.indexOf(“l”,3);
//index2 = 3
charAt
返回指定位置的字符。
var get_char = a.charAt(0);
//get_char = “h”
lastIndexOf
返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。
var index1 = lastIndexOf(‘l’);
//index1 = 3
var index2 = lastIndexOf(‘l’,2)
//index2 = 2
match
检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。
var re = new RegExp(/^\w+$/);
var is_alpha1 = a.match(re);
//is_alpha1 = “hello”
var is_alpha2 = b.match(re);
//is_alpha2 = null
substring
返回字符串的一个子串,传入参数是起始位置和结束位置。
var sub_string1 = a.substring(1);
//sub_string1 = “ello”
var sub_string2 = a.substring(1,4);
//sub_string2 = “ell”
substr
返回字符串的一个子串,传入参数是起始位置和长度
var sub_string1 = a.substr(1);
//sub_string1 = “ello”
var sub_string2 = a.substr(1,4);
//sub_string2 = “ello”
replace
用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
var result1 = a.replace(re,”Hello”);
//result1 = “Hello”
var result2 = b.replace(re,”Hello”);
//result2 = “,world”
search
执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。
var index1 = a.search(re);
//index1 = 0
var index2 = b.search(re);
//index2 = -1
slice
提取字符串的一部分,并返回一个新字符串(与 substring 相同)。
var sub_string1 = a.slice(1);
//sub_string1 = “ello”
var sub_string2 = a.slice(1,4);
//sub_string2 = “ell”
split
通过将字符串划分成子串,将一个字符串做成一个字符串数组。
var arr1 = a.split(“”);
//arr1 = [h,e,l,l,o]
length
返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
var len = a.length();
//len = 5
toLowerCase
将整个字符串转成小写字母。
var lower_string = a.toLowerCase();
//lower_string = “hello”
toUpperCase
将整个字符串转成大写字母。
var upper_string = a.toUpperCase();
//upper_string = “HELLO”

/*
******************************************
字符串函数扩充
******************************************
*/

/*
===========================================
//去除左边的空格
===========================================

*/
String.prototype.LTrim = function()
{
return this.replace(/(^\s*)/g, “”);
}

/*
===========================================
//去除右边的空格
===========================================
*/
String.prototype.Rtrim = function()
{
return this.replace(/(\s*$)/g, “”);
}

/*
===========================================
//去除前后空格
===========================================
*/
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, “”);
}

/*
===========================================
//得到左边的字符串
===========================================
*/
String.prototype.Left = function(len)
{

if(isNaN(len)||len==null)
{
len = this.length;
}
else
{
if(parseInt(len)<0||parseInt(len)>this.length)
{
len = this.length;
}
}

return this.substr(0,len);
}

/*
===========================================
//得到右边的字符串
===========================================
*/
String.prototype.Right = function(len)
{

if(isNaN(len)||len==null)
{
len = this.length;
}
else
{
if(parseInt(len)<0||parseInt(len)>this.length)
{
len = this.length;
}
}

return this.substring(this.length-len,this.length);
}

/*
===========================================
//得到中间的字符串,注意从0开始
===========================================
*/
String.prototype.Mid = function(start,len)
{
return this.substr(start,len);
}

/*
===========================================
//在字符串里查找另一字符串:位置从0开始
===========================================
*/
String.prototype.InStr = function(str)
{

if(str==null)
{
str = “”;
}

return this.indexOf(str);
}

/*
===========================================
//在字符串里反向查找另一字符串:位置0开始
===========================================
*/
String.prototype.InStrRev = function(str)
{

if(str==null)
{
str = “”;
}

return this.lastIndexOf(str);
}

/*
===========================================
//计算字符串打印长度
===========================================
*/
String.prototype.LengthW = function()
{
return this.replace(/[^\x00-\xff]/g,”**”).length;
}

/*
===========================================
//是否是正确的IP地址
===========================================
*/
String.prototype.isIP = function()
{

var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;

if (reSpaceCheck.test(this))
{
this.match(reSpaceCheck);
if (RegExp.$1 <= 255 && RegExp.$1 >= 0
&& RegExp.$2 <= 255 && RegExp.$2 >= 0
&& RegExp.$3 <= 255 && RegExp.$3 >= 0
&& RegExp.$4 <= 255 && RegExp.$4 >= 0)
{
return true;
}
else
{
return false;
}
}
else
{
return false;
}

}

/*
===========================================
//是否是正确的长日期
===========================================
*/
String.prototype.isLongDate = function()
{
var r = this.replace(/(^\s*)|(\s*$)/g, “”).match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
if(r==null)
{
return false;
}
var d = new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);

}

/*
===========================================
//是否是正确的短日期
===========================================
*/
String.prototype.isShortDate = function()
{
var r = this.replace(/(^\s*)|(\s*$)/g, “”).match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r==null)
{
return false;
}
var d = new Date(r[1], r[3]-1, r[4]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}

/*
===========================================
//是否是正确的日期
===========================================
*/
String.prototype.isDate = function()
{
return this.isLongDate()||this.isShortDate();
}

/*
===========================================
//是否是手机
===========================================
*/
String.prototype.isMobile = function()
{
return /^0{0,1}13[0-9]{9}$/.test(this);
}

/*
===========================================
//是否是邮件
===========================================
*/
String.prototype.isEmail = function()
{
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this);
}

/*
===========================================
//是否是邮编(中国)
===========================================
*/

String.prototype.isZipCode = function()
{
return /^[\\d]{6}$/.test(this);
}

/*
===========================================
//是否是有汉字
===========================================
*/
String.prototype.existChinese = function()
{
//[\u4E00-\u9FA5]為漢字﹐[\uFE30-\uFFA0]為全角符號
return /^[\x00-\xff]*$/.test(this);
}

/*
===========================================
//是否是合法的文件名/目录名
===========================================
*/
String.prototype.isFileName = function()
{
return !/[\\\/\*\?\|:”<>]/g.test(this);
}

/*
===========================================
//是否是有效链接
===========================================
*/
String.prototype.isUrl = function()
{
return /^http[s]?:\/\/([\w-]+\.)+[\w-]+([\w-./?%&=]*)?$/i.test(this);
}

/*
===========================================
//是否是有效的身份证(中国)
===========================================
*/
String.prototype.isIDCard = function()
{
var iSum=0;
var info=””;
var sId = this;

var aCity={11:”北京”,12:”天津”,13:”河北”,14:”山西”,15:”内蒙古”,21:”辽宁”,22:”吉林”,23:”黑龙 江”,31:”上海”,32:”江苏”,33:”浙江”,34:”安徽”,35:”福建”,36:”江西”,37:”山东”,41:”河南”,42:”湖 北”,43:”湖南”,44:”广东”,45:”广西”,46:”海南”,50:”重庆”,51:”四川”,52:”贵州”,53:”云南”,54:”西藏”,61:”陕西”,62:”甘肃”,63:”青海”,64:”宁夏”,65:”新疆”,71:”台湾”,81:”香港”,82:”澳门”,91:”国外”};

if(!/^\d{17}(\d|x)$/i.test(sId))
{
return false;
}
sId=sId.replace(/x$/i,”a”);
//非法地区
if(aCity[parseInt(sId.substr(0,2))]==null)
{
return false;
}

var sBirthday=sId.substr(6,4)+”-“+Number(sId.substr(10,2))+”-“+Number(sId.substr(12,2));

var d=new Date(sBirthday.replace(/-/g,”/”))

//非法生日
if(sBirthday!=(d.getFullYear()+”-“+ (d.getMonth()+1) + “-” + d.getDate()))
{
return false;
}
for(var i = 17;i>=0;i–)
{
iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 – i),11);
}

if(iSum%11!=1)
{
return false;
}
return true;

}

/*
===========================================
//是否是有效的电话号码(中国)
===========================================
*/
String.prototype.isPhoneCall = function()
{
return /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/.test(this);
}

/*
===========================================
//是否是数字
===========================================
*/
String.prototype.isNumeric = function(flag)
{
//验证是否是数字
if(isNaN(this))
{

return false;
}

switch(flag)
{

case null: //数字
case “”:
return true;
case “+”: //正数
return /(^\+?|^\d?)\d*\.?\d+$/.test(this);
case “-“: //负数
return /^-\d*\.?\d+$/.test(this);
case “i”: //整数
return /(^-?|^\+?|\d)\d+$/.test(this);
case “+i”: //正整数
return /(^\d+$)|(^\+?\d+$)/.test(this);
case “-i”: //负整数
return /^[-]\d+$/.test(this);
case “f”: //浮点数
return /(^-?|^\+?|^\d?)\d*\.\d+$/.test(this);
case “+f”: //正浮点数
return /(^\+?|^\d?)\d*\.\d+$/.test(this);
case “-f”: //负浮点数
return /^[-]\d*\.\d$/.test(this);
default: //缺省
return true;
}
}

/*
===========================================
//是否是颜色(#FFFFFF形式)
===========================================
*/
String.prototype.IsColor = function()
{
var temp = this;
if (temp==””) return true;
if (temp.length!=7) return false;
return (temp.search(/\#[a-fA-F0-9]{6}/) != -1);
}

/*
===========================================
//转换成全角
===========================================
*/
String.prototype.toCase = function()
{
var tmp = “”;
for(var i=0;i0&&this.charCodeAt(i)<255) { tmp += String.fromCharCode(this.charCodeAt(i)+65248); } else { tmp += String.fromCharCode(this.charCodeAt(i)); } } return tmp } /* =========================================== //对字符串进行Html编码 =========================================== */ String.prototype.toHtmlEncode = function() { var str = this; str=str.replace(/&/g,"&"); str=str.replace(//g,”>”);
str=str.replace(/\’/g,”'”);
str=str.replace(/\”/g,”"”);
str=str.replace(/\n/g,”
“);
str=str.replace(/\ /g,” “);
str=str.replace(/\t/g,”    “);

return str;
}

/*
===========================================
//转换成日期
===========================================
*/
String.prototype.toDate = function()
{
try
{
return new Date(this.replace(/-/g, “\/”));
}
catch(e)
{
return null;
}
}