灏天阁

BOM 操作

· Yin灏

window 对象

访问客户端对象

  • window
  • navigator
  • screen
  • history
  • location
  • document

浏览器检测方法

常规检测方法有两种：

  • 特征检测法
  • 字符串检测法
  1. 特征检测法：

根据浏览器支不支持特定功能来决定相应操作的方式，这是一种非精确，但是最安全的检测方式。确定浏览器的类型和型号是一件困难的事，可以仅仅在乎浏览器的执行能力。

if(document.getElementsByName) {
  var a = document.getElementsByName("a");
} else if(document.getElementsByTagsName) {
  var a = document.getElementsByTagsName("a");
}
  1. 字符串检测法：

客户端每次发送 HTTP 请求，都会附带一个 user-agent(用户代理) 字符串，对于 web 人员来说，可以使用用户代理字符串检测浏览器类型。

var s = window.navigator.userAgent;
console.log(s); // Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:90.0) Gecko/20100101 Firefox/90.0

检测浏览器版本和版本号

检测当前主流浏览器类型，包括 IE、Opeara、Safari、Chrome、Firefox 浏览器。

var ua = navigator.userAgent.toLowerCase();
var info = {
	ie: /msie/.test(ua) && !/opera/.test(ua),
	op: /opera/.test(ua),
	sa: /version.*safari/.test(ua),
	ch: /chrome/.test(ua),
	ff: /gecko/.test(ua) && !/webkit/.test(ua)
}
// 使用
info.ch && console.log("chrome 浏览器"); // chrome 浏览器

通过解析 navigator 对象的 userAgent 属性，可以获得浏览器的完整版本号。

// 检查 ie 浏览器的版本号
function getIEVer() {
	var ua = navigator.userAgent;
	var b = ua.indexOf("MSIE");
	if(b < 0) {
		return 0;
	}
	return parseFloat(ua.substring(b + 5, ua.indexOf(";", b))); // 截取版本号，并转化为数值
}

// 使用
console.log(getIEVer())

// 检查火狐浏览器的版本号
function getFFVer() {
	var ua = navigator.userAgent;
	var b = ua.indexOf("Firefox/");
	if(b < 0) {
		return 0;
	}
	return parseFloat(ua.substring(b + 8, ua.lastIndexOf("\."))); // 截取版本号，并转化为数值
}

// 使用
console.log(getFFVer()); // 90

检测操作系统

['Win', 'Mac', 'X11', 'Linux'].forEach(function(t) {
  (t === 'X11') ? t = 'Unix' : t;
  navigator['is' + t] = function() {
  	return navigator.userAgent.indexOf(t) != -1;
  }
});

console.log(navigator.isWin()); // false
console.log(navigator.isMac()); // true
console.log(navigator.isLinux()); // false
console.log(navigator.isUnix()); // false

location 对象

location 对象属性：

属性 说明
href 完整的 URL
protocol 声明了 URL 的协议部分，包括后面的冒号，例如：“http:”
host 声明了 URL 的主机名和端口号，例如：“www.mysite.cn:80”
hostname 声明了 URL 的主机名，例如：“www.mysite.cn”
port 声明了 URL 的端口号，例如：“80”
pathname 声明了 URL 的路径部分，例如：“news/index.asp”
search 声明了 URL 的查询部分，包括前导问号，例如："?id=123&name=location"
hash 声明了 URL 的锚部分，包括前导符（#），例如："#top" 
/*
  下面示例定义了一个获取 URL 查询字符串参数值的通用函数，该函数能够抽取每个参数和参数值，并以名/值的形式存储在对象中返回。
*/
var queryString = function() {
	var q = location.search.substring(1); // "id=123&name=location"
	var a = q.split('&');
	var o = {};
	for(var i = 0; i < a.length; i++) {
		var n = a[i].indexOf('=');
		if(n == -1) continue;
		var v1 = a[i].substring(0, n);
		var v2 = a[i].substring(n + 1);
		o[v1] = unescape(v2);
	}
	return o;
}

// "?id=123&name=location"
console.log(queryString()); // { id: "123", name: "location" }

如果需要 URL 其他信息，只能通过字符串处理方法截取。例如，如果要获取网页的名称，可以这样设计。

var p = location.pathname;
var n = p.substring(p.lastIndexOf("/") + 1);

如果要获取文件扩展名，可以这样设计。

var c = p.substring(p.lastIndexOf(".") + 1);

location 对象还可以定义两个方法：reload() 和 replace()

  • reload() 可以重新装载当前文档。
  • replace() 可以装载一个新文档而无须为它创建一个新的历史记录。也就是说，在浏览器的历史列表中，新文档将替换当前文档。这样在浏览器中就不能够通过单击“返回”按钮返回当前文档。

history 对象

history 对象存储了客户端浏览器的浏览历史，通过 window 对象的 history 属性可以访问对象。实际上，history 对象仅存储最近访问的、有限条目的 URL 信息。

操作历史记录

// 在历史记录中后退
window.history.back(); // 等效于在浏览器的工具栏上单击 “返回” 按钮

// 在历史记录中前进
window.history.forward(); // 等效于在浏览器的工具栏上单击 “前进” 按钮

// 移动到制定的历史记录点
// 使用 go() 方法从当前绘画的历史记录中加载页面，当前页面位置索引为 0，上一页就是 -1，下一页就是 1，以此类推
window.history.go(-1);
window.history.go(1);

// length 属性
// 使用 length 属性可以了解历史记录栈中一共有多少页
window.history.length;

设计无刷新案例：

<h1>History API 示例</h1>
<ul id="menu">
    <li><a href="news.html">News</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
<div id="content">
    <h2>当前内容：index.html</h2>
</div>

function getContent(url, addEntry) {
  $.get(url)
  .done(function(data) {
    $('#content').html(data);
    if(addEntry == true) {
      window.history.pushState(null, null, url); // 把目标地址推入浏览器历史记录堆栈中
    }
  })
}

$(function() {
  $('#menu a').on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    getContent(href, true);
    $('#menu a').removeClass('active');
    $(this).addClass('active');
  })
})

// 注册 popstate 事件，跟踪浏览器历史记录的变化，如果发生变化，则调用 getContent() 函数更新页面内容，但是不再把目标地址添加到历史记录堆栈中。
// 点击回退按钮才能触发 popstate 事件
window.addEventListener('popstate', function(e) {
  getContent(location.pathname, false)
})

screen 对象

screen 存储客户端屏幕信息。

演示如何让弹出的窗口居中：

function center(url) {
  var w = screen.availWidth / 2; // 获取客户端屏幕宽度的一半
  var h = screen.availHeight / 2; // 获取客户端屏幕高度的一半
  var t = (screen.availHeight - h) / 2; // 计算居中显示时顶部坐标
  var l = (screen.availWidth - w) / 2; // 计算居中显示时左侧坐标
  var p = "top=" + t + ", left=" + l + ", width=" + w + ", height=" + h;

  var win = window.open(url, "url", p);
  // win.focus();
}
center("https://www.baidu.com")

document 对象

document 对象代表当前文档，使用 window 对象的 document 属性访问。

访问文档对象

当浏览器加载文档后，会自动构建文档对象模型，把文档中每个元素都映射到一个数据集合中，然后以 document 进行访问，document 对象与它所包含的各种节点。

下面使用 name 访问文档元素

<img src="bg.gif" name="img" alt="">
<form name="form" class="" action="http://www.mysite.cn/navi" method="post"></form>

console.log(document.img.src); // file:///C:/Users/IP/Desktop/test/bg.gif
console.log(document.form.action); // http://www.mysite.cn/navi

使用文档对象集合可以快速检索

console.log(document.images[0].src); // file:///C:/Users/IP/Desktop/test/bg.gif
console.log(document.forms[0].action); // http://www.mysite.cn/navi

文档对象模型：

/*
  document 对象：
   - forms[]：form 对象数组
   - anchors[]：anchor 对象数组
   - links[]：link 对象数组
   - images[]：image 对象数组
   - applets[]：applet 对象数组
   - embeds[]：嵌入对象数组
*/

如果设置了 name 属性，也可以使用关联数组引用对应的元素对象。

console.log(document.images['img'].src); // file:///C:/Users/IP/Desktop/test/bg.gif
console.log(document.forms['form'].action); // http://www.mysite.cn/navi

- Book Lists -