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. thinkphp结合bootstrap打造个性化分页

    分页功能是web开发中常见的一项功能,也存在很多形式,这里主要讲一下利用thinkPHP框架的page类来打造一款bootstrap风格的分页过程. 首先需要去thinkPHP官网现在其分页扩展类ht ...

  2. Python的替换函数——strip(),replace()和re.sub()(转)

    原文地址:http://blog.csdn.net/zcmlimi/article/details/47709049 在Python中常用的三个"替换"函数是strip(),rep ...

  3. ES5 方法学习

    Object 1. Object.getPrototypeOf(o)获取对象的prototype对象.等价于以前的o.__proto__ var o = {}; Object.getPrototype ...

  4. 【SAM】POJ1509-Glass Beads

    [题目大意] 求一个循环数列的最小表示法. [思路] 把原创复制一遍放在后面,建立SAM,从s按字典序开始跑长度L即可. 板子来源(作者见连接内):

  5. 事件BOM DOM

    1.事件 1.1 事件绑定 # 1.写在html元素中 <button onclick='code'></button> # 2.把事件当作元素对象的方法 btnEle.onc ...

  6. [AGC025D]Choosing Points

    [AGC025D]Choosing Points 题目大意: 输⼊\(n(n\le300),d_1,d_2\),你要找到\(n^2\)个整点\((x,y)\)满⾜\(0\le x,y<2n\). ...

  7. Java学习笔记(13)

    StringBuffer 增加 append(boolean b)    可以添加任意类型的数据到容器中 insert(int offset,boolean b)  指定插入的索引值,插入对应的内容  ...

  8. js处理时间戳

    工具类 function add0(m){return m<10?'0'+m:m } function format(shijianchuo) { var time = new Date(shi ...

  9. [转]json+JSONObject+JSONArray 结合使用

    JSONObject与JSONArray的区别简述: 区别在于JSONObject是一个{}包裹起来的一个对象(Object),而JSONArray则是[]包裹起来的一个数组(Array),说白点就是 ...

  10. NHibernate 存储过程 第十四篇

    NHibernate也是能够操作存储过程的,不过第一次配置可能会碰到很多错误. 一.删除 首先,我们新建一个存储过程如下: CREATE PROC DeletePerson @Id int AS DE ...