浏览器对象模型“BOM”，对浏览器窗口进行访问和操作
location对象
location.href url地址
location.hash 锚点
location.hostname 主机名（需要放到服务器上）
location.host 主机名+端口号（需要放到服务器上）
location.pathname 目录或者文件
location.port 端口
location.protocol 协议
location.search ？后面的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
p{
height:100%;
height:2000px;
background:#abcdef;
}
</style>
<script>
window.onload=function(){ console.log(location.href);//file:///C:/Users/96579/Desktop/index.html
console.log(location.hash);//#top
console.log(location.host);
console.log(location.hostname);
console.log(location.pathname);///C:/Users/96579/Desktop/index.html
console.log(location.port);
console.log(location.protocol);//file:
console.log(location.search);//?id=1 }
</script>
</head>
<body>
<a id="top">这是顶部</a>
<p>这是我的页面</p>
<a href="#top"><button>回到顶部</button></a>
</body>
</html>
利用js控制location.hash ，跳转到某个锚点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
p{
height:100%;
height:2000px;
background:#abcdef;
}
</style>
<script>
window.onload=function(){ var btn=document.getElementById("btn");
btn.onclick=function(){
location.hash="#top";
} }
</script>
</head>
<body>
<a id="top">这是顶部</a>
<p>这是我的页面</p>
<button id="btn">回到顶部</button>
</body>
</html>
location.href=url 切换页面url，会有历史记录
window.location=url 切换页面url，会有历史记录
location.replace(url) 切换页面url，没有历史记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
p{
height:100%;
height:2000px;
background:#abcdef;
}
</style>
<script>
window.onload=function(){ setTimeout(function(){
location.href="new.html";
},1000); }
</script>
</head>
<body> <p>这是我的页面</p> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
p{
height:100%;
height:2000px;
background:#abcdef;
}
</style>
<script>
window.onload=function(){ setTimeout(function(){
location.replace("new.html");
},1000); }
</script>
</head>
<body> <p>这是我的页面</p> </body>
</html>
location.reload() 重新加载页面（有可能从缓存中加载）
location.reload(true) 重新加载页面（强制从服务器重新加载）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){ var reload=document.getElementById("reload");
reload.onclick=function(){
location.reload();//有可能从缓存中刷新
location.reload(true);//强制从服务器重新加载
}
}
</script>
</head>
<body> <button id="reload">刷新</button>
</body>
</html>
history对象
history.back() 后退一步
history.go(-1) 后退一步
history.go(-n) 后退n步
history.forward() 前进一步
history.go(1) 前进一步
history.go(n) 前进n步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
a{
color:orange;
}
a.active{
color:red;
}
button{
background:#abcdef;
width:200px;
height:50px;
line-height:50px;
text-align: center;
border-radius:5px;
cursor:pointer;
margin:20px 0;
}
</style>
<script>
window.onload=function(){ var back=document.getElementById("back");
var back1=document.getElementById("back1");
var back2=document.getElementById("back2");
back.onclick=function(){
history.back();
}
back1.onclick=function(){
history.go(-1);
}
back2.onclick=function(){
history.go(-2);
}
}
</script>
</head>
<body>
<div>
<a href="index1.html" class="active">index1.html</a> |
<a href="index2.html">index2.html</a> |
<a href="index3.html">index3.html</a>
</div> <button id="back">后退一步 history.back()</button>
<button id="back1">后退一步 history.go(-1)</button>
<button id="back2">后退两步 history.go(-2)</button>
<br>
<button id="forward">前进一步 history.forward()</button>
<button id="forward1">前进一步 history.go(1)</button>
<button id="forward2">前进两步 history.go(2)</button>
</body>
</html>
补充，在原生js中，可以直接使用id获取元素
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>new</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
console.log(box);
} </script>
</head>
<body>
<div id="box"></div>
</body>
</html>
screen 对象
screen.availWidth 屏幕可用宽度
screen.availHeight 屏幕可用高度（去除底部任务栏）
window.innerWidth 窗口可见宽度
window.innerHeight 窗口可见高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){ console.log("screen.availWidth:"+screen.availWidth);
console.log("screen.availHeight:"+screen.availHeight);
console.log("window.innerWidth:"+window.innerWidth);
console.log("window.innerHeight:"+window.innerHeight); }
</script>
</head>
<body> </body>
</html>
IE浏览器不支持console.log
navigator 对象
navigator.userAgent 获取浏览器相关信息
控制台的移动端设备可以编辑新增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){ function getBrowser(){
var explorer=navigator.userAgent.toLowerCase(); if(explorer.indexOf("msie")>-1){
return "IE8~10（低版本IE）";
}else if(explorer.indexOf("trident")>-1){
return "高版本IE或者edge浏览器";
}else if(explorer.indexOf("chrome")>-1){
return "chrome";
}else if(explorer.indexOf("firefox")>-1){
return "firefox";
}else if(explorer.indexOf("opera")>-1){
return "opera";
}else if(explorer.indexOf("safari")>-1){
return "safari";
}else{
return "未知浏览器";
}
}
var myBrowser=getBrowser();
alert(myBrowser);
}
</script>
</head>
<body> </body>
</html>
浏览器对象模型“BOM”，对浏览器窗口进行访问和操作的更多相关文章
- 浏览器对象模型BOM小结
概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...
- 浏览器对象模型BOM
第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...
- 浏览器对象模型BOM（Browser Object Model）
1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...
- JavaScript高级程序设计（第3版）学习笔记·第8章——浏览器对象模型BOM
转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...
- ExtJS浏览器对象模型BOM——命名空间和用户代理对象、Cookie
BOM(浏览器对象模型(BrowserObjectModel)),允许访问和操控浏览器窗口.研发者通过使用BOM,可移动窗口.更改状态栏文本.执行其它不与页面内容发生直接联系的操作. 本文将从ExtJ ...
- 浏览器对象模型bom的作用是什么？
浏览器对象模型bom的作用是什么? 零.总结 1.BOM提供了独立于内容而与浏览器窗口进行交互的对象 2.BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和 ...
- 浏览器对象模型(BOM)是什么？（体系结构+知识详解）（图片：结构）
浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一.总结 1.BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集. ...
- JavaScript编程：浏览器对象模型BOM
4.浏览器对象模型BOM: document.body.offsetwidth可以获取浏览器宽度. Window对象: 窗口操作: 1.moveBy(dx,dy ...
- JavaScript 浏览器对象模型 (BOM)
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”. 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准. 由于现代浏览器已经 ...
- 浏览器对象模型(BOM)
BOM结构 用户浏览网页的时候,浏览器会自动创建一些对象,这些对象存放着浏览器窗口的属性和相关信息,也就是大家熟称的BOM.浏览器对象模型是一个层次化的对象集,我们可以通过window对象访问所有对象 ...
随机推荐
- Visual Studio Code | 报错 command 'markdown.extension.onBackspaceKey' not found
背景 今天使用Visual Strudio Code想用键盘Back去删除一些字符,发现报如下错误: command 'markdown.extension.onBackspaceKey' not f ...
- Spring IoC 容器和 bean 对象
程序的耦合性: 耦合性(Coupling),又叫耦合度,是对模块间关联程度的度量.耦合的强弱取决于模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少.模块间的耦合度是指模块之间的依赖关系,包 ...
- 【大白话系列】MySQL 学习总结 之 初步了解 InnoDB 存储引擎的架构设计
一.存储引擎 上节我们最后说到,SQL 的执行计划是执行器组件调用存储引擎的接口来完成的. 那我们可以理解为:MySQL 这个数据库管理系统是依靠存储引擎与存放数据的磁盘文件进行交互的. 那么 MyS ...
- Linux下静态ip的配置
------------恢复内容开始------------ TYPE=Ethernet BOOTPROTO=static#dhcp改为static,采用静态方式 DEFROUTE=yes IPV4_ ...
- HDU_4570_区间dp
http://acm.hdu.edu.cn/showproblem.php?pid=4570 连题目都看不懂,直接找了题解,copy了过来= =. 一个长度为n的数列,将其分成若干段(每一段的长度要& ...
- HTML5与HTML4的区别-----文档结构
HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句 HTML5仅规定了一种: <!DOCTYPE html> 2. ...
- 五种编程语言解释数据结构与算法——顺序表1（理论与C语言实现）
1.线性表的分类 2.线性表的定义及其基本操作 2.1.定义:线性表是具有相同类型的n(n>=0)个元素的有序序列,其中n为表长,当n=0时,该表为空表. 2.3.线性表的逻辑结构为: 2.4. ...
- Linux gcc链接动态库出错：LIBRARY_PATH和LD_LIBRARY_PATH的区别
昨天在自己的CentOs7.1上写makefile的时候,发现在一个C程序在编译并链接一个已生成好的lib动态库的时候出错.链接命令大概是这样的: [root@typecodes tcpmsg]# g ...
- 12-Java-myeclipse集成Tomcat步骤及Tomcat的使用步骤
一.了解Tomcat Tomcat是由Apache推出的一款免费开源的servlet容器/web应用服务器,可实现javaweb程序的装载,是配置JSP和java系统必备的一款环境 Tomcat目 ...
- 使用Java8 Files类读写文件
Java8 Files类的newBufferedReader()和newBufferedWriter()方法 这两个方法接受Path类型的参数.Path 类是Java8 NIO中的接口.可以由Path ...