BOM
Posted minnersun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BOM相关的知识，希望对你有一定的参考价值。
页面的事件
window.onload
页面加载完毕后触发
window.onunload
页面关闭后触发
window.onbeforeunload
页面关闭之前触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> ? //页面加载的时候,按钮还没出现,页面没有加载完毕 ? //页面加载完毕了,再获取按钮 //只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件 window.onload=function () { document.getElementById("btn").onclick=function () { alert("您好"); }; }; ? //很重要 onload=function () { document.getElementById("btn").onclick=function () { alert("您好"); }; }; ? //扩展的事件---页面关闭后才触发的事件 window.onunload=function () { ? }; //扩展事件---页面关闭之前触发的 window.onbeforeunload=function () { alert("哈哈"); }; ? </script> </head> <body> <input type="button" value="按钮" id="btn"/> <script src="common.js"></script> </body> </html>
location对象
scheme://host:port/path?query#fragment scheme:通信协议 常用的http,ftp,maito等 host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。 port:端口号 整数，可选，省略时使用方案的默认端口，如http的默认端口为80。 path:路径 由零或多个‘/‘符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。 query:查询 可选，用于给动态网页传递参数，可有多个参数，用‘&‘符号隔开，每个参数的名和值用‘=‘符号隔开。例如：name=zs fragment:信息片断 字符串，锚点.
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
?
//对象中的属性和方法
//location对象
//console.log(window.location);
?
//地址栏上#及后面的内容
console.log(window.location.hash);
//主机名及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径---相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容
console.log(window.location.search);
?
onload=function () {
document.getElementById("btn").onclick=function () {
//设置跳转的页面的地址
location.href="http://www.jd.com";//属性----------------->必须记住
location.assign("http://www.jd.com");//方法
location.reload();//重新加载--刷新
location.replace("http://www.jd.com");//没有历史记录,所以不能回退
};
};
?
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>
navigator对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
?
// 通过userAgent可以判断用户浏览器的类型 -- 一般用来判断是android系统还是windows系统
console.log(window.navigator.userAgent);
// 通过platform可以判断浏览器所在的系统平台类型. 如Win32
//console.log(window.navigator.platform);
</script>
</head>
<body>
</body>
</html>
以上是关于BOM的主要内容，如果未能解决你的问题，请参考以下文章