浏览器对象模型“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对象访问所有对象 ...
随机推荐
- 超链接a标签的伪类选择器问题，Link标签与visited标签的失效问题(问题介绍与解决方法)。
<!DOCTYPE html>< html>< head> <meta charset="utf-8" /> < ...
- TypeScript躬行记（4）——泛型
泛型是程序设计语言中的一种风格或范式,相当于类型模板,允许在声明类.接口或函数等成员时忽略类型,而在未来使用时再指定类型,其主要目的是为它们提供有意义的约束,提升代码的可重用性. 一.泛型参数 当一个 ...
- javaIO编码详解
原创 输出流 有哪些构造方法可以在参数上设置编码格式 PrintStream(File file, String csn) PrintStream(String fileName, String cs ...
- Windows下查看dll被哪个进程调用
卸载程序,结果没卸载干净---程序的安装目录中还剩下一个dll文件.想删,结果系统提示说dll文件被某个进程占用了,不让删. 先前碰到这种做法,我都是直接使用unlocker先unlock一下,然后删 ...
- caffe solver configuration
(用到一个加一个, 并非完整的介绍) lr_policy 基本的learning rate 在solver.prototxt中由参数base_lr配置. 配合lr_policy和其余的一些参数制定le ...
- RabbitMQ安装与使用
官网地址: http://www.rabbitmq.com/ 安装Linux必要依赖包 下载RabbitMQ必须安装包 进行安装,修改相关配置文件即可 步骤 1.准备: yum install gcc ...
- 全网一定不是最好懂的C++线性筛素数
Part 0:概念 先给几个概念(很重要): 合数:如果\(xy=z\text{且}x,y\text{为正整数}\),我们就说\(x,y\text{是}z\text{的合数}\) 素数:如果数\(a\ ...
- Ikuai路由安装及简单配置 v1.0
第一部分:创建虚拟机: 1.点击创建新的虚拟机 2.选择自定义模式创建(选择经典模式会更友好一些),然后点击下一步 3.下图内容不用管,直接点击下一步: 4.这里是选择安装系统路径.在这里我们 ...
- Springboot feign 传递request信息
基础实现 requestInterceptor 实现类中添加信息 public class NativeFeignConf { @Bean public RequestInterceptor getR ...
- JS杨辉三角形
题目:打印出杨辉三角形(要求打印出10行如下图) 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 分析: 1.第1列或列数=行数时,value=1 2.其余的值 ...