（一）JavaScript关于浏览器

JavaScript关于浏览器

JavaScript是在浏览器中运行的，不同浏览器对JavaScript支持是有差异的，编写JavaScript时要考虑浏览器的差异，尽可能使它能运行在不同的浏览器中。

一、浏览器中对象

1.window

Window：表示浏览器打开的窗口，充当全局作用域。使用Windows对象的属性和方法时是可以不用特别指明的（一般按照习惯吧：如window.alert()通常为alert()）。

属性名	作用
name	指定窗口的名称
parent	当前窗口（框架）的父窗口，使用它返回对象的方法和属性
opener	返回产生当前窗口的窗口对象，使用它返回对象的方法和属性
top	代表主窗口，是最顶层的窗口，也是所有其他窗口的父窗口。可通过该对象访问当前窗口的方法和属性
self	返回当前窗口的一个对象，可通过该对象访问当前窗口的方法和属性
defaultstatus	返回或设置将在浏览器状态栏中显示的默认内容
status	返回或设置将在浏览器状态栏中显示的指定内容

方法名	作用
alert()	显示一个警示对话框，包含一条信息和一个确定按钮
confirm()	显示一个确认对话框
prompt()	显示一个提示对话框，提示用户输入数据
open()	打开一个已存在的窗口，或者创建一个新窗口，并在该窗口中加载一个文档
close()	关闭一个打开的窗口
navigate()	在当前窗口中显示指定网页
setTimeout()	设置一个定时器，在经过指定的时间间隔后调用一个函数
clearTimeout()	给指定的计时器复位
focus()	使一个Window对象得到当前焦点
blur()	使一个Window对象失去当前焦点

事件	说明
onload	HTML文件载入浏览器时发生
onunload	HTML文件从浏览器删除时发生
onfocus	窗口获得焦点时发生
onblur	窗口失去焦点时发生
onhelp	用户按下F1键时发生
onresize	用户调整窗口大小时发生
onscroll	用户滚动窗口时发生
onerror	载入HTML文件出错时发生

一些对于Window的操作：

alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);//获取窗口大大小
window.confirm('对话框显示的信息！');
mu = window.open("http://www.baidu.com","","width=200,height=100");//打开一个网页，也可以其中只有url，其他则默认
mu.moveTo(1600,584);//将窗口移动到什么位置
mu.moveBy(-111,-111);//基于xy位移多少
mu.resizeTo(800,400);//改变窗口大小到w800,h400
var a =prompt("请输入你的名字","为空时文本框的内容");//输入提示框,返回输入的内容
alert(a);

一些定时操作：

定时操作函数有四个：window.setInterval、window.clearInterval、window.setTimeout、window.clearTimeout，这四个函数都是window对象的方法，这说明浏览器中的定时操作是由浏览器窗口完成的。（单位ms）

① window.setInterval 设置定时器，每隔一段时间执行指定的代码 window.setInterval(code,time);

② window.clearInterval 清除setInterval函数设置的定时器window. clearInterval(time);

③ window.setTimeout 设置定时器，每隔一段时间执行指定的代码 window.setTimeout(code,time);代码只执行一次。

④ window.clearTimeout 清除setTiimeout 函数设置的定时器 window. clearTimeout(time);

一段动态显示时间的代码:设置一个定时器，定时器每隔1000ms执行clock（）函数，而在函数中又把值赋给文本框。

<html>
  <script language=javascript>	
    var int=self.setInterval("clock()",1000);
    function clock(){
      var t=new Date();
      document.getElementById("clock").value=t;
    };
  </script>
<body>
<input type="text" id="clock" size="35" />
<button onclick="int=window.clearInterval(int)">停止定时器</button>
</body>
</html>

一个在页面中显示时间的代码：

<html>
  <script language=javascript>
    var int=self.setInterval("clock()",1000);
    function clock(){
      var t=new Date();
      var hehe = document.getElementById("ck");
      hehe.innerText=t;
    };
  </script>
<body>
<p id="ck">...</p>
<button onclick="int=window.clearInterval(int)">stop</button>
</body>
</html>

2.navigator

navigation对象包含了浏览器本身的信息；这些信息是可以被修改的，所以根据这个判断什么是不正确的。

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName：浏览器名称；

navigator.appVersion：浏览器版本；

navigator.language：浏览器设置的语言；

navigator.platform：操作系统类型；

navigator.userAgent：浏览器设定的User-Agent字符串

alert('appName = ' + navigator.appName + '\n' +
      'appVersion = ' + navigator.appVersion + '\n' +
      'language = ' + navigator.language + '\n' +
      'platform = ' + navigator.platform + '\n' +
      'userAgent = ' + navigator.userAgent);

3.scree

screen对象包含了客户端屏幕及渲染能力的信息；

screen.width：屏幕宽度，以像素为单位；

screen.height：屏幕高度，以像素为单位；

screen.colorDepth：返回颜色位数，如8、16、24。

alert('Screen size = ' + screen.width + ' x ' + screen.height)

4.location

location对象包含了浏览器当前的URL信息；

var b = location.href;//获取完整的URL
alert(b);
location.protocol; // 协议'http'
location.host; //地址 'www.xxx.com'
location.port; //端口号 '8080'
location.pathname; // 路径'/path/index.html'
location.search; 
location.hash;

location的方法重载页面，重载当前页面和加载一个新的页面。

if (confirm('重新加载当前页' + location.href + '?')) {
    location.reload();
} else {
    location.assign('https://www.baidu.com/index.php?tn=monline_3_dg'); // 设置一个新的URL地址
}

5.document

document对象表示浏览器中加载页面的文档对象；

document.getElementById('unid');//获取到这个对象
document.getElementsByTagName('input');

document对象还有一个cookie属性，可以获取当前页面的Cookie。(服务器可以由此区分用户)

document.cookie;

JavaScript能读取到页面的Cookie，服务器端在设置Cookie时，应该始终坚持使用httpOnly；这个行为由浏览器实现，设置后JavaScript不能读取cookie，主流浏览器均支持httpOnly选项。

6.history

forward和 back 方法如同浏览器的前进和后退功能。

history.forward();//前进
history.back();//后退