### JavaScript知识点收藏
#### 四种浏览器对`document.body`的`clientHeight`、`offsetHeight`和`scrollHeight`的解释
JavaScript 中对于页面尺寸的获取主要涉及到几个关键属性：`clientHeight`、`offsetHeight` 和 `scrollHeight`。这些属性用于描述浏览器窗口或者元素的大小以及滚动范围，在不同的浏览器中的实现可能会有所不同。
- **`clientHeight`**：表示元素内部的高度（不包括边框、滚动条和内边距），即可视区域的高度。例如，如果你的浏览器窗口有一个顶部菜单栏和一个底部状态栏，则`clientHeight`是这两者之间的高度。
- **`offsetHeight`**：
- IE（Internet Explorer）、Opera 认为`offsetHeight = clientHeight + 滚动条 + 边框`。
- Netscape、Firefox 认为`offsetHeight`是网页内容的实际高度，可能小于`clientHeight`。
- **`scrollHeight`**：
- IE、Opera 认为`scrollHeight`是网页内容的实际高度，可以小于`clientHeight`。
- Netscape、Firefox 认为`scrollHeight`是网页内容的高度，最小值是`clientHeight`。
**总结**：
- `clientHeight`通常表示的是可视区域的高度。
- Netscape 和 Firefox 认为`offsetHeight`和`scrollHeight`都是网页内容的高度，但在内容高度小于等于`clientHeight`时有所区别。
- IE 和 Opera 的解释则考虑了边框和滚动条等因素。
**宽度相关的属性**：`clientWidth`、`offsetWidth` 和 `scrollWidth` 的解释与上述高度属性类似，只是将“高度”替换为“宽度”。
**特殊情况**：Firefox 在不同的文档类型（DOCTYPE）中对`clientHeight`的处理不同。在 XHTML 1.0 Transitional 模式下，其表现可能会有所不同。
#### JS取`clientHeight`与`scrollTop`
获取页面的高度和滚动位置对于实现动态页面效果非常有用。然而，不同的浏览器和文档类型会导致获取这些属性的结果差异很大。
- **示例数据**：
- HTML：`clientHeight`的值在 IE 和 FF 中分别为 608/0 和 630/11096。
- XHTML 1.0：`clientHeight`的值在 IE 和 FF 中分别为 942/591 和 1076/630。
**兼容性解决方案**：
```javascript
// 获取 clientHeight 的通用方法
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
// 判断当前页面的 Doctype 是否为 XHTML
var isXhtml = (h2 <= h1 && h2 != 0) ? true : false;
// 根据 Doctype 选择 body 或 documentElement
var body = isXhtml ? document.documentElement : document.body;
// 输出最终的 clientHeight 值
console.log(body.clientHeight);
```
**安全获取 scrollTop**：
```javascript
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
```
**浏览器检测**：
```javascript
var ua = navigator.userAgent.toLowerCase();
var os = new Object();
os.isFirefox = ua.indexOf("gecko") != -1;
os.isOpera = ua.indexOf("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf("msie") != -1;
```
#### JS获取Flash对象方法汇总
随着技术的发展，Flash 已经逐渐被淘汰，但了解如何通过 JavaScript 控制 Flash 对象仍然是有用的。
- **IE、Firefox、Maxthon**：使用 `document.getElementById(id)`
- **Opera**：使用 `document.embeds(id)`
```javascript
var isOpera = (window.opera && navigator.userAgent.match(/opera/gi)) ? true : false;
if (isOpera) {
var oswf = document.embeds['ad_flipper_swf'];
} else {
var oswf = document.getElementById('ad_flipper_swf');
}
```
#### JS执行顺序
JavaScript 的执行顺序对于理解程序的行为至关重要，尤其是当涉及到异步操作时。
- **同级的不同代码块**：执行顺序是从上到下。
- **嵌套代码块**：先执行上层代码块，再执行子代码块。这里提到的“嵌套”是指一个文件引用另一个文件的情况，而不是指通过`document.write`等形式插入的代码。
以上介绍的知识点涵盖了常见的浏览器差异问题、页面尺寸的获取方法、Flash 对象的获取方式以及 JavaScript 的执行顺序等核心概念，有助于开发者更好地理解和解决跨浏览器兼容性问题。
