www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

js判断是否在微信或QQ中,06浏览器测试Web前端

2020-04-30 01:14 来源:未知

缘由是原先分歧的浏览器对特色的扶植情状例外,因而在前后相继编写制定的时候开采人士会由此判定浏览器的项目,来调节网页要不要显得相关天性。而随着浏览器的升华,浏览器帮忙的天性越发全,因而,为了告知以前的网页“作者是永葆那个特征的”,浏览器开拓者会在navigator字段增添此外浏览器的价签,从而避过页面开垦职员的检查评定。有一点像两侧不断抗御,不断破解的以为,引致以往英特网一些老的代码无法用,只可以依赖当前的骨子里情状要好编写代码。

声称:本文为原创作品,如需转发,请申明来源并保存原来的文章链接。 

Window对象

  • 不无浏览器都扶持Window对象,它表示浏览器窗口。

  • 享有JS全局对象、函数以致变量均会自行成为window对象的积极分子。

  • 全局变量是window对象的特性

  • 大局函数是window对象的主意

  • HTML DOM的document也是window对象的特性之一

         window.document.getElementById("header");
    
MicroMessenger/xxxqq/xxx(xxx)疑似是版本号?

浏览器之间的差别太令人头大了,本章也单独介绍jQuery完结浏览器宽容的基本思路,以致包装了各样差距后的接口。$.support中的众多品质和完毕方式,超过了本文的行文初志(三个头四个大呀),有趣味的能够自行检索、翻阅相关的资料。

Window Screen 可用中度

  • screen.avaliHeight 属性再次回到访问者显示屏的冲天,以像素为单位,减去分界面性情,举例窗口职务栏这么些。
   <script>
document.write("可用高度: "   screen.availHeight);
</script>
var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/[0-9]/i)){ return "weixin";}if(ua.match(/QQ/[0-9]/i)){ return "QQ";}

l  检查实验navigator.userAgent,客户代理检测法

setTimeout()方法

  • 通过多少时间后试行有个别函数

  • 语法

   window.setTimeout("javascript 函数",毫秒数);
  • 实例
   //等待3秒,弹出hello
   setTimeout(function(){alert("hello")},3000);

扩大:为何浏览器navigator中会现身别的浏览器的标志呢?

读读写写,不对的地点请报告笔者,多多调换协同升高 

提示框

  • 现身提示框时,客商须求输入有个别值,然后点击鲜明,再次回到值为输入的值,点击撤消,重返值为null

  • 语法

window.prompt("sometext","defaultvalue");
  • 实例
   var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
    x="你好 "   person   "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}

后边用网络现有的代码开掘有大多浏览器被识别成QQ,像那样:

6.浏览器测验Support

使用JS修改cookie

  • 在JS中,修正cookie相仿于创设cookie,修正现在旧的cookie将被覆盖
   document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

时间: 2019-12-20阅读: 94标签: 微信

6.1        用户代理检验法

window.navigator是Navigator对象,富含了正在接收的浏览器的音讯:

属性

说明

appCodeName

代码名

appName

名称

appVersion

平台和版本信息

platform

操作系统和硬件平台

userAgent

用于HTTP请求的用户代理头

再看看navigator在IE和火狐下的测量试验:

l  IE8

属性

IE8

appCodeName

Mozilla

appName

Microsoft Internet Explorer

appVersion

4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

platform

Win32

userAgent

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

l  Firefox

属性

Firefox

appCodeName

Mozilla

appName

Netscape

appVersion

5.0 (Windows)

platform

Win32

userAgent

Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0

 

测量试验结果令人纠缠,既然。。。,Chrome、Safari、Opera就离奇了!

但是,我们也开采userAgent如同包括了较全的新闻。浏览器在提倡HTTP哀告时,会把userAgent的新闻作为央求头中User-Agent的值。服务器供给的话可以为此检查评定浏览器类型,对响应的从头到尾的经过张开适配,比如适配各类型号的手提式有线电话机浏览器。

jQuery正是依赖userAgent属性来检验浏览器的品类,并提供了$.browser对象,通过$.browser,大家能够收获当前浏览器的类型和版本。

$.browser富含二种最盛行的浏览器标识(IE,Mozilla,Webkit, Opera)和本子,对应的有效性标志有:

l  webkit

l  safari(deprecated)

l  opera

l  msie

l  mozilla

$.browser不需等待$(documentState of Qatar.ready就能够拿走。使用示例:

$.browser.msie/mozilla/webkit/opera

$.browser.version

是因为$.browser基于navigator.userAgent检查评定浏览器类型,很轻便被客商和浏览器诈骗,並且缺少灵活性和远远不足完备。因而最佳制止编写制定基于特定浏览器的代码。相对于$.browser,$.support针对浏览器特定脾气的检查实验则更是有效。

从API文书档案中得以见到,现在jQuery.browser恐怕会移到二个插件中

$.browser的落实代码如下:

// 用户代理检测正则表达式定义

var...

rwebkit = /(webkit)[ /]([w.] )/,

ropera = /(opera)(?:.*version)?[ /]([w.] )/,

rmsie = /(msie) ([w.] )/,

rmozilla = /(mozilla)(?:.*? rv:([w.] ))?/,

// 到处都是把属性取出来,作为局部变量使用,可以减少跨作用域查询,提高性能

userAgent = navigator.userAgent,

// 用户代理匹配结果

browserMatch,

// 实际执行匹配的函数

uaMatch: function( ua ) {

    ua = ua.toLowerCase();

    // 依次匹配各浏览器

    varmatch = rwebkit.exec( ua ) ||

       ropera.exec( ua ) ||

       rmsie.exec( ua ) ||

       ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||

       [];

    // match[1] || "" :match[1]为false(空字符串、null、undefined、0等)时,默认为""

    // match[2] || "0" :match[2]为false(空字符串、null、undefined、0等)时,默认为"0"

    return{ browser: match[1] || "", version: match[2] || "0"};},

// 将测试结果保存至jQuery.browser

browserMatch = jQuery.uaMatch( userAgent );

if( browserMatch.browser ) {

    jQuery.browser[ browserMatch.browser ] = true;

    jQuery.browser.version = browserMatch.version;

}

// 不推荐使用safari标记,用webkit代替

if( jQuery.browser.webkit ) {

    jQuery.browser.safari = true;

}

clearTimeout()

  • 用以停止试行setTimeout(State of Qatar方法的函数代码,借使函数未实施

  • 语法

   clear.Timeout(timeoutVariable)
  • 实例
   var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}

我们将本来代码中的正则表达式改为下边那样就能够了:

6.2        作用特色检查实验法

即依据浏览器是不是辅助某项特定的意义特色,来支配程序的实行分支,这种办法不思量浏览器类型和本子,也不思索浏览器晋级带给的变型,越发安全、灵活,同期减少了保卫安全职业,由此形成了即刻主流的检查测验方法。比方绑定load事件的代码:

// 兼容事件模型,通过检测浏览器的功能特性,而非嗅探浏览器

if( document.addEventListener ) {

    // Use the handy event callback

    // 使用较快的加载完毕事件

    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false);

 

    // A fallback to window.onload, that will always work

    // 注册window.onload回调函数

    window.addEventListener( "load", jQuery.ready, false);

 

// If IE event model is used

// 如果是IE事件模型

} elseif( document.attachEvent ) {

    // ensure firing before onload,

    // maybe late but safe also for iframes

    // 确保在onload之前触发onreadystatechange,可能慢一些但是对iframes更安全

    document.attachEvent( "onreadystatechange", DOMContentLoaded );

 

    // A fallback to window.onload, that will always work

    // 注册window.onload回调函数

    window.attachEvent( "onload", jQuery.ready );

 

    // If IE and not a frame

    // continually check to see if the document is ready

    vartoplevel = false;

 

    try{

       toplevel = window.frameElement == null;

    } catch(e) {}

 

    if( document.documentElement.doScroll && toplevel ) {

       doScrollCheck();

    }

}

JS 获取有关客户显示器新闻

  • window.screen 对象富含关于顾客显示屏的新闻
  • window.screen 对象在编辑时能够不使用window那几个前缀
    • screen.avaliWidth - 可用的荧屏宽度
    • screen.avaliHeight - 可用的显示屏高度

原因是局地手机浏览器navigator新闻中会包括qqbrowser字符,由此被错判为QQ碰到,通过解析区别条件下的navigator新闻,Wechat和QQ情形下会蕴藏如下的风味字符串:

6.3        盒模型

盒模型是CSS中的多个概念,CSS 将装有的网页成分都看作是贰个矩形框,这些框由成分的剧情(content)、内边距(padding)、边框(border)和异域距(margin)组成,如下图(摘自

Web前端 1  

三种盒模型

l  IE古板模型:width和height属性包涵内边距和边框宽度

l  W3C标准模型:width和height属性不带有边距和边框宽度

jQuery.boxModel

jQuery提供了boxModel属性,jQuery.boxModel为true时,表示协理W3C盒模型,false表示援救IE古板盒模型。

尺寸封装

jQueryn封装了那二种盒模型的差别,统一为W3C标准模型,并提供了改正后的接口:

接口

计算公式

width, height

content

innerWidth, innerHeight

content padding

outerWidth, outerHeight

content padding border 可选的margin

最后附个风趣的图,Chrome公布的时候看看的,会心一笑,不解释:

Web前端 2

QQ:47214707 EMail:[email protected] 注解:本文为原创作品,如需转发,请表明来源并保存原来的文章链接。 读读写写,不没有错地方...

setInterval()方法

  • 间距钦点的纳秒数不停地试行钦赐的代码
  • 语法
   window.setInterval("javascript function", milliseconds);
  • 实例1
   //每3秒弹出一个hello
   setInterval(function(){alert("Hello")},3000);
  • 实例2: 实时显妥贴后天子
   var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function is_weixn_qq(){var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger") {return "weixin";} else if (ua.match(/QQ/i) == "qq") {return "QQ"; }return false;}

l  检验浏览器的成效特色,即功效特色检查实验法

JS Window Location对象

  • window.location 对象用于获取当前页面包车型客车地点UTiguanL,并把浏览珍视定向到新的分界面。编写时可不写window前缀。

  • location的一对实例

    • location.hostname 重返web主机的域名
    • location.pathname 重临当前页面的路子和文书名
    • location.port 重临web主机的端口(80或443)
    • location.protocol 再次来到所利用的web契约(

合营各类主流浏览器是JavaScript库的必修课之一,日常的电话机质量检查测量试验测浏览器有三种方法:

后退网页

  • history.back(卡塔尔(قطر‎ 加载历史记录的前二个UTucsonL,与浏览器点击后退开关效果等同
   <html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

作者:nuysoft/高云 QQ:47214707 EMail:[email protected]

使用JS创建cookie

  • 创建cookie
   document.cookie = "username=LCH"
  • 为cookie增加二个超时岁月(以UTC或培洛霉素T时间),暗许意况下,cookie在浏览器关闭时去除。
   document.cookie="username=LCH; expires=Thu,  18 Dec 2013 12:00:00 GMT"
  • 利用path参数告诉浏览器cookie的门径,暗许情状下,cookie归属当前页面
   document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
  • 实例: 设置cookie值的函数
   //cname: cookie的名称;cvalue: cookie的值;expires: cookie的过期时间
   function setCookie(cname, cvalue, exdays)
   {
    var d = new Date();
    d.setTime(d.getTime() (exdays*24*60*60*1000));
    var expires = "expires=" d.toGMTString();
    document.cookie = cname   "="   cvalue   "; "   expires;
   }

JS获取浏览器新闻

  • window.navigator 对象蕴含关于媒体人浏览器的音讯,编写时得以差十分的少window前缀
   <div id="example"></div> 
<script> 
txt = "<p>浏览器代号: "   navigator.appCodeName   "</p>"; 
txt = "<p>浏览器名称: "   navigator.appName   "</p>"; 
txt = "<p>浏览器版本: "   navigator.appVersion   "</p>"; 
txt = "<p>启用Cookies: "   navigator.cookieEnabled   "</p>"; 
txt = "<p>硬件平台: "   navigator.platform   "</p>"; 
txt = "<p>用户代理: "   navigator.userAgent   "</p>"; 
txt = "<p>用户代理语言: "   navigator.systemLanguage   "</p>"; 
document.getElementById("example").innerHTML=txt; 
</script> 
  • 须要小心的是,navigator对象的新闻享有误导性,因为:

    • navigator数据可悲浏览器使用者改正
    • 一对浏览器对测量试验站点会识别错误
    • 浏览器不能告诉晚于浏览器公布的新操作系统
  • 应用对象检查评定可以用来检查实验不一样的浏览器

    • 比方,独有Opera援助属性window.opera,由此得以分辨出Opera
           if(window.opera) {
            //此为Opera浏览器
           }

clearInterval()方法

  • clearInterval(卡塔尔(قطر‎方法用来终止setInterval(State of Qatar方法试行的函数代码
  • 语法
   clearInterval(intervalVariable)
  • 实例
   <p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

JS Cookie

  • Cookie用于存款和储蓄web页面的客户新闻

    • 当客户访谈web页面时,他的名字能够记录在cookie中
    • 在客户下一遍访谈页面时,可以在cookie中读取顾客访谈记录。
  • cookie以建值对格局存在

   username = Lch
  • JS可以选用document.cookie属性来创设、读取、及删除cookie

使用JS读取cookie

  • 在JS中能够利用以下代码来读取cookie
   var x = document.cookie;
  • 实例: 获取cookie值的函数
function getCookie(cname)
{
  var name = cname   "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i  ) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

检测cookie值的函数

  • 以下是一个检查测量检验cookie是或不是创建的函数,要是设置cookie则展示问安信息,若无设置 cookie,将会显得二个弹窗用于询问访员的名字,并调用 setCookie 函数将新闻报道工作者的名字存款和储蓄 365 天:
function checkCookie()
{
 var username=getCookie("username");
 if (username!="")
 {
   alert("Welcome again "   username);
 }
 else 
 {
   username = prompt("Please enter your name:","");
   if (username!="" && username!=null)
   {
     setCookie("username",username,365);
   }
 }
}

确认框

  • 语法
   //这里的window可以省略
   window.confirm("sometext");
  • 实例
   var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了"确定"按钮!";
}
else
{
    x="你按下了"取消"按钮!";
}

Window尺寸

  • 有两种艺术可以规定浏览器窗口的尺寸

  • 对于IE、Chrome、Firefox、Opera、Safari

    • window.innerHeight - 浏览器窗口的中间中度(包含滚动条)
    • window.innerWidth - 浏览器窗口的个中宽度(满含滚动条)
  • 对于IE8、7、6、5

    • document.documentElement.clientHeight
    • document.documentElement.clientWidth
  • 或者

    • document.body.clientHeight
    • document.body.clientWidth
  • 实例:获取浏览器中度大幅度(包涵全数浏览器)

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

加载新文书档案(网页)

  • location.assign(State of Qatar 方法加载新的文书档案
//加载一个新文档,即打开http://www.w3cschool.cc这个页面
  <html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3cschool.cc")
 }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

JS Window-浏览器对象模型

  • 浏览器对象模型(BOM)使JS有力量与浏览器对话
  • 由现今世浏览器差十分少完成了JS交互作用性方面包车型客车相像方式和本性,由此常被以为是BOM的不二秘技和品质。

腾飞网页

  • history forward(State of Qatar方法加载历史列表的下三个UKoleosL,与在浏览器中式茶食击前行按键效果相通

        <html>
     <head>
     <script>
     function goForward()
       {
       window.history.forward()
       }
     </script>
     </head>
     <body>
     <input type="button" value="Forward" onclick="goForward()">
     </body>
     </html>
    

其他Window方法

  • window.open(卡塔尔 - 张开新窗口
  • window.close(State of Qatar - 关闭当前窗口
  • window.moveTo(State of Qatar - 移动当前窗口
  • window.resizeTo(卡塔尔(قطر‎ - 调治当前窗口

使用JS删除cookie

  • 剔除cookie只需安装参数为以前的年华就能够
   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

获取URL(href)

  • location.href 属性返回当前页面包车型地铁url
<script>
//输出当前页面的URL
document.write(location.href);
</script>
//输出: http://www.runoob.com/js/js-window-location.html

JS计时风浪

  • setInterval(卡塔尔 间距钦赐的皮秒数不停地实行钦点的代码。
  • setTimeOut(卡塔尔(قطر‎ 经过钦定的飞秒数后实践钦命的代码
  • 注: 那是HTML DOM Window对象的八个办法

获取URL路径名(pathname)

  • location.pathname 属性再次来到ULANDL的路径名
<script>
document.write(location.pathname);
</script>
//输出: /js/js-window-location.html

JS 弹窗

  • JS中能够创建三种信息框:警示框、确认框、提醒框

Window Screen 可用宽度

  • screen.avaliWidth 属性重回访谈者荧屏的上涨的幅度,以像素为单位,减去分界面性子,举个例子窗口职责栏这么些。
   <script>
document.write("可用宽度: "   screen.availWidth);
</script>

JS 获取历史记录

  • window.history 对象满含浏览器的历史,编写时方可差不离window前缀

警告框

  • 当警报框现身后,客户须要点击鲜明开关才干三番五次开展操作
  • 语法:
   //这里也可以省略window前缀,直接使用alert()方法
   window.alert("sometext");
  • 实例
   <!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    alert("你好,我是一个警告框!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="显示警告框">
</body>
</html>
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:js判断是否在微信或QQ中,06浏览器测试Web前端