Js Window - 获取浏览器窗口

  • 全局变量是window对象的属性
  • 全局函数是window对象的方法
  • HTML DOM的document是window对象属性之一

    window.document.getElementById("header"); === document.getElementById("header");

window.innerHeight

window.innerWidth

获取浏览器尺寸

IE/Chrome/Firefox/Opera/Safari

document.documentElement.clientHeight

document.documentElement.clientWidth

获取浏览器尺寸

IE8/7/6/5

document.body.clientHeight

document.body.clientWidth

获取浏览器尺寸

其他

window.open()

打开新窗口

window.close()

关闭当前窗口

window.moveTo()

移动当前窗口

window.resizeTo()

调整当前窗口的尺寸

获取window尺寸

 var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

 var heigh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

 console.log(width + "," + heigh);

————————————————————————————————————————————

Js Screen - 获取屏幕的信息

screen.availWidth

获取屏幕宽度

screen.availHeight

获取屏幕高度

————————————————————————————————————————————

Js Location - 获取页面当前位置

location.href

返回当前链接

location.hostname

返回 web 主机的域名

location.pathname

返回当前页面的路径和文件名

location.port

返回 web 主机的端口 （80 或 443）

location.protocol

返回所使用的 web 协议（http:// 或 https://）

location.assign("http://www.xxx.cn")

加载新的文档

————————————————————————————————————————————

Js History - 获取浏览器历史

history.forward();

前进

history.back();

后退

————————————————————————————————————————————

Js Navigator - 访问者浏览器的信息

p.s.来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：navigator 数据可被浏览器使用者更改，浏览器无法报告晚于浏览器发布的新操作系统。

使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

navigator.appCodeName

浏览器内核

navigator.appName

浏览器名称

navigator.appVersion

内核版本

navigator.cookieEnabled

Cookie是否开启

navigator.platform

系统平台

navigator.userAgent

浏览器代理

navigator.systemLanguage

语言

————————————————————————————————————————————

Js PopupAlert - 消息框

alert("文本")

警告框

confirm("文本")

确认框

prompt("文本","默认值")

提示框

提示框样例

 var name = prompt("please input your name:", "hugh dong")

 if (name != null && name != "") {

     document.write("hello," + name);

 }

————————————————————————————————————————————

Js Timing - 计时事件

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

时钟样例

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <!-- <script type="text/javascript" src="test.js"></script> -->

 </head>

 <body>

     <div>

         <p id="txt"></p>

         <input type="button" value="stop" onclick="stop()">

     </div>

     <script type="text/javascript">

     // 调用timeOut()5秒后弹出alert

     function timeOut() {

         var t1 = setTimeout("alert('5 second')", 5000);

     }

     // timeOut();

     // *********************************************************************

     // 秒表计时,控制台每秒输出秒数

     var c = 0;

     function timedCount() {

         console.log(c);

         c = c + 1

         t2 = setTimeout("timedCount()", 1000)

     }

     timedCount();

     // *********************************************************************

     // 简单时钟

     function startTime() {

         var today = new Date()

         var h = today.getHours()

         var m = today.getMinutes()

         var s = today.getSeconds()

         m = checkTime(m)

         s = checkTime(s)

         document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;

         t3 = setTimeout('startTime()', 500)

     }

     function checkTime(i) {

         if (i < 10) { i = "0" + i }

         return i

     }

     startTime();

     // *********************************************************************

     // 停止时钟

     function stop() {

         clearTimeout(t3);

     }

     </script>

 </body>

 </html>

————————————————————————————————————————————

Js Cookies

  • 名字 cookie
  • 密码 cookie
  • 日期 cookie

Cookie创建样例

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <script type="text/javascript" src="test.js"></script>

 </head>

 <body onload="checkCookie()">

 </body>

 </html>
 // 获取cookie

 function getCookie(c_name) {

     if (document.cookie.length > 0) {

         // 检索cookie中的内容

         c_start = document.cookie.indexOf(c_name + "=");

         if (c_start != -1) {

             c_start = c_start + c_name.length + 1;

             c_end = document.cookie.indexOf(";", c_start);

             if (c_end == -1)

                 c_end = document.cookie.length;

             // 姓名子串解码

             return unescape(document.cookie.substring(c_start, c_end));

         }

     }

     return "";

 }

 // 创建cookie,输入姓名,值,密码

 function setCookie(c_name, value, expiredays) {

     // 获取当前时间

     var exdate = new Date();

     // 根据当前时间的'天'+过期天数,建立新的天数(秒单位)

     exdate.setDate(exdate.getDate() + expiredays);

     // 创建cookie内容

     document.cookie = c_name + "=" + escape(value) +

         ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());

 }

 function checkCookie() {

     username = getCookie('username'); // 获取cookie

     // 如果cookie存在则弹窗欢迎

     if (username != null && username != "") {

         alert('Welcome again ' + username + '!');

     }

     // cookie不存在则创建cookie

     else {

         // 弹窗输入用户名

         username = prompt('Please enter your name:', "");

         // 如果用户名不为空则创建cookie

         if (username != null && username != "") {

             setCookie('username', username, 365);

         }

     }

 }

JavaScript | window浏览器对象模型的更多相关文章

  1. JavaScript Window - 浏览器对象模型

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚 ...

  2. Window - 浏览器对象模型

    浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准. 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因 ...

  3. JavaScript——BOM(浏览器对象模型)，时间间隔和暂停

    BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...

  4. [TimLinux] JavaScript BOM浏览器对象模型

    1. 简介 ECMAScript是JavaScript的核心,但是如果要在WEB中使用JavaScript,那么BOM则无疑才是真的的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网 ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习：Window - 浏览器对象模型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JavaScript浏览器对象模型（BOM）之window对象

    一.BOM概述 BOM(Browser Object Model)浏览器对象模型,它提供了很多对象,用于访问浏览器的功能. BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象 ...

  7. Javascript高级程序设计——BOM（浏览器对象模型）

    BOM(浏览器对象模型),它提供了独立于内容而与浏览器窗口进行交互的对象.BOM由一系列相关的对象构成.一.window对象      window对象表示整个浏览器窗口,但不必表示其中包含的内容.W ...

  8. 第一百一十一节，JavaScript，BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  9. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

随机推荐

  1. 设计模式-状态模式（State Pattern）

    本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 状态模式简介 状态模式允许一个对象在其内部状态改变的时候改变它的行为,他的内部会存着好几种状态, ...

  2. 【拓展Lucas】模板

    求\(C_n^m \mod p\),写得太丑了qwq. 第一次写拓展Lucas竟然是在胡策的时候qwq写了两个半小时啊_(:з」∠)还写挂了一个地方qwq 当然今天胡策我也是第一次写中国剩余定理(ˇˍ ...

  3. BZOJ 1221 [HNOI2001] 软件开发（费用流）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1221 [题目大意] 每天对毛巾都有一定的需求ni,每天可以花f价值每条购买毛巾, 当天 ...

  4. 【最小生成树】【kruscal】【贪心】CDOJ1636 梦后楼台高锁，酒醒帘幕低垂

    首先,考虑到,我们需要找到一条路径,使它的最小边尽量大,最大边尽量小 然后,考虑到m比较小,我们可以去寻找一个m^2或者m^2logm的算法 考虑枚举最小边,那么我们就需要在m或者mlogm的时间内找 ...

  5. Spring的Bean生命周期理解

    首先,在经历过很多次的面试之后,一直不能很好的叙述关于springbean的生命周期这个概念.今日对于springBean的生命周期进行一个总结. 一.springBean的生命周期: 如下图所示: ...

  6. Codeforces Gym 100269A Arrangement of Contest 水题

    Problem A. Arrangement of Contest 题目连接: http://codeforces.com/gym/100269/attachments Description Lit ...

  7. 每天一个linux命令21之ln: linux 下的软链和硬链

    首先理解一下一下inode:Unix/Linux系统内部不使用文件名,而使用inode号码来识别文件. 表面上,用户通过文件名,打开文件.实际上,系统内部这个过程分成三步:首先,系统找到这个文件名对应 ...

  8. [典型漏洞分享]Insert型SQL注入的发现和利用，篡改订单金额

    本例中的SQL注入和其它发现的SQL注入的主要区别:1.生成订单接口是一次性的,反复提交无效,因此,此类型的SQL注入比较难通过扫描器发现,需要人工提取和手动测试.2.Insert类型的SQL注入,不 ...

  9. POJ 2019 Cornfields （二维RMQ）

    Cornfields Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 4911   Accepted: 2392 Descri ...

  10. Android 卡顿优化 3 布局优化 工具 Hierarchy Viewer

    欲善其事, 先利其器. 分析布局, 就不得不用到Hierarchy Viewer了. 本文工具使用皆以GithubApp的详情界面RepoDetailActivity为例说明. 为了不影响阅读体验, ...