My Blog

Appearance

BOM & DOM ​

BOM(浏览器对象模型) ​

iframe ​

javascript
//以下都为window对象下属性

`parent` //指当前窗口的父级窗口
`top` //永远指向最上层窗口
`self`; //指向被调用窗口

窗口位置 ​

javascript
//在IE、Safari、Opera和Chrome中
window.screenTop 和 window.screenLeft

//在Firefox中
wndow.screenX 和 wndow.screenY

WARNING

在 IE、Opera 中，screenLeft 和 screenTop 保存的是从屏幕左边和上边到由 window 对象表示的页面的可见区域的距离。

但在 Chrome、Firefox 和 Safari 中，screenX 或 screenTop 保存的都是整个浏览器窗口偶相对于屏幕的坐标值。

窗口大小及调整 ​

javascript
outerWidth、outerHeight   //IE9+、Firefox、Safari返回浏览器窗口本身尺寸，在Opera中返回页面视图容器的大小
innerWidth、innerHeight   //IE9+、Firefox、Safari该容器中页面视图大小

//在Chrome中，这四个值都返回相同的值，即视图大小而非浏览器窗口大小

document.documentElement.clientWidth
document.documentElement.clientHeight
//保存了页面视口信息

document.body.clientWidht
document.body.clientHeight
//混杂模式取得相同信息，在Chrome混杂模式下，这这两种都可以使用

window.resizeTo(x,y)    //调整到 x x y

检测平台、设备 ​

javascript
var system = {
	win: false,
	mac: false,
	x11: false,

	//移动设备
	iphone: false,
	ipod: false,
	ipad: false,
	ios: false,
	android: false,
	nokiaN: false,
	winMobile: false,

	//游戏系统
	wii: false,
	ps: false,
};

var ua = navigator.userAgent;

var p = navigator.platform;
system.win = p.indexOf('Win') == 0;
system.mac = p.indexOf('Mac') == 0;
system.x11 = p == 'X11' || p.indexOf('Linux') === 0;

//检测ios版本
if (system.mac && ua.indexOf('Mobile') > -1) {
	if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
		system.ios = parseFloat(RegExp.$1.replace('_', '.'));
	} else {
		system.ios = 2; //不能真正检测出来，所以只能猜测
	}
}

//检测android版本
if (/Android (\d+\.\d+).test(ua)/) {
	system.android = parseFloat(RegExp.$1);
}

DOM(文档对象模型) ​

Firefox3.6+ 和 Chrome

classList 可以取得元素的 class，使用 remove、add、toggle 可以操作类名

readyState 属性 ​

loading 正在加载文档

complete 文档加载完成

insertAdjacentHTML() ​

js
//作为前一个同辈元素插入
element.insertAdjacentHTML('beforebegin',"<p>123</p>");

//最为第一个子元素插入
element.insertAdjacentHTML('afterbegin',"<p>123</p>");

//作为最后一个子元素插入
element.insertAdjacentHTML('beforeend',"<p>123</p>");

//作为后一个同辈元素插入
element.insertAdjacentHTML('afterend',"<p>123</p>");

//支持IE、Firefox 8+、Safari、Opera和Chrome

scrollIntoView() ​

js
//让元素可见
document.forms[0].scrollIntoView();

//支持IE、Firefox、Safari和Opera