目前主流的浏览器分这么几种:
• IE 6-11:国内用得最多的IE浏览器,历来对W3C标准支持差。从IE10开始支持ES6标准;

• Chrome:Google出品的基于Webkit内核浏览器,内置非常强悍的JavaScript引擎——V8。

• Safari:Apple的Mac系统自带的基于Webkit内核的浏览器.

• Firefox:Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey。

• 移动设备上目前iOS和Android两大阵营分别主要使用Apple的Safari和Google的Chrome,由于两者都是Webkit核心,结果HTML5首先在手机上全面普及最新版本均支持ES6。

另外还要注意识别各种国产浏览器,如某某安全浏览器,某某旋风浏览器,它们只是做了一个壳,其核心调用的是IE,也有号称同时支持IE和Webkit的“双核”浏览器。

不同的浏览器对JavaScript支持的差异主要是,有些API的接口不一样,比如AJAX,File接口。对于ES6标准,不同的浏览器对各个特性支持也不一样。 在编写JavaScript的时候,就要充分考虑到浏览器的差异,尽量让同一份JavaScript代码能运行在不同的浏览器中。


浏览器对象

js可以获取浏览器提供的很多对象 并进行操作

window

windows 不但充当全局作用域, 还表示 浏览器窗口.

  • outerWidth/outerHeight: 整个浏览器的宽高.
  • innerWidth 获取浏览器窗口的内部宽度
  • innerHeight 获取浏览器窗口的内部高度

    内部宽度: 除去菜单,工具栏,边框等等. 网页的净宽高.

    console.log(window.innerWidth); console.log(window.innerHeight); console.log(window.outerWidth); console.log(window.outerHeight);


浏览器的信息. • navigator.appName:浏览器名称;
• navigator.appVersion:浏览器版本;
• navigator.language:浏览器设置的语言;
• navigator.platform:操作系统类型;
• navigator.userAgent:浏览器设定的User-Agent字符串。

console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.language);
console.log(navigator.platform);
console.log(navigator.userAgent);

screen: 屏幕信息

显示屏幕宽高,颜色位数. 这个参数是固定的.

console.log("width="+screen.width + "heigh="+ screen.height + "color="+screen.colorDepth);

location: 当前页面的url 信息

一个完整的url: http://www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol  → http
location.host      → www.example.com
location.port      → 8080
location.pathname  → /path/index.html
location.search    → ?a=1&b=2
location.hash      → TOP

加载新页面(覆盖原有页面): location.assign() location.assign(“http://www.baidu.com”);

刷新当前页: location.reload()


document: 当前页面

html在浏览器中表示为树形结构, document就是树的根节点.

console.log(document.title);       // Calculator →  原来的title 名字
console.log(document.title='hi');  // hi  →  把title 设置成 hi
console.log(document.title);       // hi  →  之后的title名字(源文件里还是Calculator)

getElementById & getElementsByTagName

menu = document.getElementById('drink-menu');
console.log(menu.tagName);
drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {
    s = s + drinks[i].innerHTML + ',';
}
alert(s);
console.log(document.cookie);

由于JavaScript能读取到页面的Cookie,而用户的登录信息通常也存在Cookie中,这就造成了巨大的安全隐患,这是因为在HTML页面中引入第三方的JavaScript代码是允许的:

<!-- 当前页面在wwwexample.com -->
<html>
    <head>
        <script src="http://www.foo.com/jquery.js"></script>
    </head>
    ...
</html>

如果引入的第三方的JavaScript中存在恶意代码,则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。 为了解决这个问题,服务器在设置Cookie时可以使用httpOnly,设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现,主流浏览器均支持httpOnly选项,IE从IE6 SP1开始支持。 为了确保安全,服务器端在设置Cookie时,应该始终坚持使用httpOnly。


history: 浏览器历史记录.

back() 后退 forword() 前进

已过时 不要使用.