js客户端(js客户端招聘)

客户端js和服务器端js的区别

js一般来说有3块的内容：

ECMAScript描述语法和基本对象；

文档对象模型（DOM），描述处理网页内容的方法和接口，html；

浏览器对象模型（BOM），描述浏览器的交互方法和接口。

客户端的js一般3个部分都要用到，2,3就是对页面内容处理。

服务端js一般只用到第一个部分。和其他服务端语言一样对数据进行处理。

这绝不是说服务端开发更简单，而是对于语言内容来说。

客户端与JS交互

客户端在做完基本UI界面之后，往往都会向JS与客户端交互上发展，简单来说就是：客户端调用JS方法，JS调用客户端方法，这样做对app灵活性方面有了极大提升。

网上比较好用的第三方框架很多，比较典型的有 webviewJavaScriptBridge ,苹果自iOS7之后推出的一款框架叫 JavaScriptCore

JavaScriptCore 是在webview的didFinishLoad里面注入JS语句，完成两端的相互调用，我查过一些资料，对这个框架用着不舒服，于是就转向了 webviewJavaScriptBridge ,下面我就着重记录一下自己在开发这块功能时候的笔记和想法。

webviewJavaScriptBridge 兼容iOS6之前和之后，同样也兼容了iOS8推出的 WKWebView ，我想用过 WKWebView 的人都知道它比之 UIWebView 的优势， webviewJavaScriptBridge 能兼容 WKWebView 是再好不过了。

往简单了说， webviewJavaScriptBridge 的使用主要是靠 WKWebViewJavascriptBridge 来连接OC端(也即客户端)与JS端，这里我们需要配合服务端来做，规定好方法名，调用 registerHandler 和 callHandler 就可以了。

[self.bridge setWebViewDelegate:self]; 这个可要可不要，有时候可能需要在webview代理方法中处理一些UI上的显示问题，所以我这里保留了。但是这样的话就可能造成循环引用，因为self持有webview，而webview又持有self，所以我在这里用了weak修饰webview就可以了。

简单来说，在客户端只需要在合适的地方调用

两端的调用总体来说就是这样，是不是很方便呢？注意要和前端同事协调好方法名

web前端开发中js如何调用客户端webview中自定义的方法

实现的原理很简单，就是借助客户端webview的WebViewJavascriptBridge对象的callHandler方法和registerHandler方法进行数据传输，其中callHander用于js调用客户端的方法，registerHandler用于调用客户端调用js的方法，具体实现方法如下:

js判断客户端是pc端还是移动端

Js判断客户端是否为PC还是手持移动设备

方法一

function IsPC(){?

? ? var userAgentInfo = navigator.userAgent;

? ? var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");?

? ? var flag = true;?

for (var v = 0; v

if(userAgentInfo.indexOf(Agents[v]) 0) { flag = false; break; }

? ? }?

? ? return flag;?

? }

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

? ? //alert(navigator.userAgent);?

? ? window.location.href ="iPhone.html";

} else if (/(Android)/i.test(navigator.userAgent)) {

? ? //alert(navigator.userAgent);

? ? window.location.href ="Android.html";

} else {

? ? window.location.href ="pc.html";

};

方法二

var browser={

? ? versions:function(){

? ? ? ? ? var u = navigator.userAgent, app = navigator.appVersion;

? ? ? ? ? return {//移动终端浏览器版本信息

? ? ? ? ? ? ? ? trident: u.indexOf('Trident') -1, //IE内核

? ? ? ? ? ? ? ? presto: u.indexOf('Presto') -1, //opera内核

? ? ? ? ? ? ? ? webKit: u.indexOf('AppleWebKit') -1, //苹果、谷歌内核

? ? ? ? ? ? ? ? gecko: u.indexOf('Gecko') -1 u.indexOf('KHTML') == -1, //火狐内核

? ? ? ? ? ? ? ? mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

? ? ? ? ? ? ? ? ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

? ? ? ? ? ? ? ? android: u.indexOf('Android') -1 || u.indexOf('Linux') -1, //android终端或者uc浏览器

? ? ? ? ? ? ? ? iPhone: u.indexOf('iPhone') -1 , //是否为iPhone或者QQHD浏览器

? ? ? ? ? ? ? ? iPad: u.indexOf('iPad') -1, //是否iPad?

? ? ? ? ? ? ? ? webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部

? ? ? ? ? ? ? ? weixin: u.indexOf('MicroMessenger') -1, //是否微信

? ? ? ? ? ? ? ? qq: u.match(/\sQQ/i) == " qq" //是否QQ

? ? ? ? ? ? };

? ? ? ? }(),

? ? ? ? language:(navigator.browserLanguage || navigator.language).toLowerCase()

}

? if(browser.versions.mobile || browser.versions.ios || browser.versions.android ||

? browser.versions.iPhone || browser.versions.iPad){?

? window.location = "";

? }

方法三： 摘自im- qq

var os = function() {

? ? var ua = navigator.userAgent,

? ? isWindowsPhone = /(?:Windows Phone)/.test(ua),

? ? isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,

? ? isAndroid = /(?:Android)/.test(ua),

? ? isFireFox = /(?:Firefox)/.test(ua),

? ? isChrome = /(?:Chrome|CriOS)/.test(ua),

? ? isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid !/(?:Mobile)/.test(ua)) || (isFireFox /(?:Tablet)/.test(ua)),

? ? isPhone = /(?:iPhone)/.test(ua) !isTablet,

? ? isPc = !isPhone !isAndroid !isSymbian;

? ? return {

? ? ? ? ? isTablet: isTablet,

? ? ? ? ? isPhone: isPhone,

? ? ? ? ? isAndroid : isAndroid,

? ? ? ? ? isPc : isPc

? ? };

}();

使用方法

if(os.isAndroid || os.isPhone){

alert("-----");

}

方法四：

if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf("?mobile")0){

try{

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){

window.location.href="手机页面";

}elseif(/iPad/i.test(navigator.userAgent)){

window.location.href="平板页面";

}else{

window.location.href="其他移动端页面"

? ? ? ? ? ? }

}catch(e){}

? ? }

}

方法五

//平台、设备和操作系统?

varsystem ={

win:false,

mac:false,

xll:false

};?

//检测平台?

varp = navigator.platform;

system.win = p.indexOf("Win") ==0;

system.mac = p.indexOf("Mac") ==0;

system.x11 = (p =="X11") || (p.indexOf("Linux") ==0);

//跳转语句，如果是手机访问就自动跳转到caibaojian.com页面?

if(system.win||system.mac||system.xll){

}else{

window.location.href="";

}?

方法六

functionis_mobile(){

varregex_match =/(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;

varu = navigator.userAgent;

if(null== u) {

returntrue;

? }

varresult = regex_match.exec(u);

if(null== result) {

returnfalse

}else{

returntrue

? }

}

if(is_mobile()) {

document.location.href='';//修改为你所需跳转目标页地址

}

方法7 百度webapp版

!---识别手机或电脑的js开始---

(function(){

varres = GetRequest();

varpar = res['index'];

if(par!='gfan'){

varua=navigator.userAgent.toLowerCase();

varcontains=function(a, b){

if(a.indexOf(b)!=-1){returntrue;}

? ? ? ? };

//将下面的改成你的wap手机版页面地址 如我的

vartoMobileVertion =function(){

window.location.href =''

? ? ? ? }

if(contains(ua,"ipad")||(contains(ua,"rv:1.2.3.4"))||(contains(ua,"0.0.0.0"))||(contains(ua,"8.0.552.237"))){returnfalse}

if((contains(ua,"android") contains(ua,"mobile"))||(contains(ua,"android") contains(ua,"mozilla")) ||(contains(ua,"android") contains(ua,"opera"))

||contains(ua,"ucweb7")||contains(ua,"iphone")){toMobileVertion();}

? ? }

})();

functionGetRequest(){

varurl = location.search;//获取url中"?"符后的字串

vartheRequest =newObject();

if(url.indexOf("?") !=-1) {

varstr = url.substr(1);

strs = str.split("");

for(vari =0; i strs.length; i ++) {

theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);

? ? ? }

? }

returntheRequest;

}

怎样用JS获取客户端的硬件，系统等信息（适

JavaScript 获取客户端计算机硬件及系统信息

通过WMI来实现获取客户端计算机硬件及系统信息:

复制代码代码如下:

function getSysInfo(){

var locator = new ActiveXObject ("WbemScripting.SWbemLocator");

var service = locator.ConnectServer(".");

//CPU信息

var cpu = new Enumerator (service.ExecQuery("SELECT * FROM Win32_Processor")).item();

var cpuType=cpu.Name,hostName=cpu.SystemName;

//内存信息

var memory = new Enumerator (service.ExecQuery("SELECT * FROM Win32_PhysicalMemory"));

for (var mem=[],i=0;!memory.atEnd();memory.moveNext()) mem[i++]={cap:memory.item().Capacity/1024/1024,speed:memory.item().Speed}

//系统信息

var system=new Enumerator (service.ExecQuery("SELECT * FROM Win32_ComputerSystem")).item();

var physicMenCap=Math.ceil(system.TotalPhysicalMemory/1024/1024),curUser=system.UserName,cpuCount=system.NumberOfProcessors

return {cpuType:cpuType,cpuCount:cpuCount,hostName:hostName,curUser:curUser,memCap:physicMenCap,mem:mem}

}

代码实现主要包括这几部分：

先通过new ActiveXObject ("WbemScripting.SWbemLocator"); 访问到WbemScripting对象。

通过locator.ConnectServer(".");连接我们本地电脑（.代表本地电脑，当然

也可以访问其他计算机）。

通过service.ExecQuery("SELECT * FROM Win32_Processor")这个类似sql的语句（其实系统信息也是存储在计算中一个类似数据库的文件中）获取我们需要的对象的记录集。

通过new Enumerator来创建一个可枚举的对象，下面就可以遍历取信息了。

注意：运行的前提是要修改浏览器安全设置，“允许对未标记为可安全执行的ActiveX

脚本的运行”。