BOM操作地址栏信息
<button id="btn">点击刷新</button>
<script>
// 获取浏览器地址栏信息
// window.location
console.log(window.location);
// 1, window.location.reload() 方法
// 页面重新加载/刷新方法
// window.location.reload(); // 不能直接写,否则会一直刷新
// 一般是于判断和事件绑定执行,不能单独执行
// 点击刷新,5秒钟之后刷新
// 移动端,浏览器刷新不方便点击,可以设定按钮点击
btn.onclick = function(){
window.location.reload();
}
// 2, window.location.herf
// 获取地址栏的信息内容
// 中文 显示为 %两位十六进制数值
// 可以将 %XX 转化为中文
// 直接获取地址栏信息
console.log(window.location.href);
// 将地址栏信息中文正常显示 decodeURIComponent()
console.log(decodeURIComponent(window.location.href)) ;
// 3, window.location.host
// 获取地址栏信息中,主机地址信息
// 当页面再服务器运行时,可以获取服务器主机地址信息,一般是IP地址或者域名
// 4, window.location.port
// 获取地址栏信息中,端口的数值
// 所谓的端口,是计算机程序,与计算机本身,沟通的通道
// 每一个软件,运行时,都要有独立的与计算机沟通的通道
// 这个通道,我们称为 端口
// 每个软件都有一个独立的端口
// 此时获取到的往往是 服务器 运行的端口
// 5, window.location.search
// 获取地址栏信息中,传参的数据
// 在浏览器地址栏中,可以实现数据的传递,也就是传递参数
// 格式是 地址?传参的数据
// 获取的是 ?以及之后的内容
BOM操作之编程导航
<div id="d">点我去百度</div>
<div id="d2"></div>
<script>
// 之前页面跳转,只能通过超链接来实现
// 现在通过JavaScript,可以给所有标签添加事件,触发页面跳转效果
// window.location.href 可以获取地址浏览信息
// window.location.href = url地址 可以设定,跳转页面地址
// 地址必须是字符串形式
// 点击 div 标签,触发代码程序
d.onclick = function(){
// 设定跳转地址是 百度
window.location.href = 'https://www.baidu.com';
}
// 5秒以后,跳转网站
// 通过定时器实现
// 定义变量,存储倒计时的起始时间
var int = 5;
// 定义定时器
setInterval( function(){
// 输出内容,倒计时时间是变量
d2.innerHTML = `请您注意,${int}秒之后,跳转至新浪页面`;
// 倒计时时间做 -- 递减操作
int--;
// 倒计时时间到达,执行页面跳转操作
if(int == -1){
window.location.href = 'https://www.sina.com';
}
} , 1000);
</script>
/ BOM操作之获取浏览器相关信息
console.log(window.navigator);
// 获取浏览器版本号,内核,型号,等相关信息
console.log(window.navigator.userAgent);
// 浏览器软件名称
// 任何一个浏览器,获取结果都是 Netscape 网景公司
// Netscape 是一个标准浏览器生成公司
// 现在为了致敬网景公司,appName,统一都是 Netscape
console.log(window.navigator.appName);
// 浏览器软件版本信息
console.log(window.navigator.appVersion);
// 本地电脑,操作系统信息
console.log(window.navigator.platform);
BOM操作之跳转
// BOM 操作之浏览器的跳转 window.history
// 在一个浏览器窗口中,打开页面,会有前进,后退,操作
// 可以通过JavaScript程序,实现 浏览器按钮的 前进 后退 功能
// 一般多用于页面注册,填写信息,电商购物平台
// 上一步,下一步等类似操作使用
console.log( window.history )
// window.history.lenght 当前窗口一共访问过几个页面
// window.history.back() 功能就是 后退 功能
// 返回到上一个访问的页面
// window.history.forward() 功能就是 前进 功能
// 前进到下一个访问的页面
// window.history.go(数值) 跳转到指定位置的页面
// 通过设定跳转几个页面来实现
// +数值 就是前进
// -数值 就是后退
// 设定的数值是跳转的次数
// 问题1:
// 重复访问,length会不会增加?
// 只要通过超链接访问,或者window.location.herf,跳转访问的页面
// 即时是重复页面,也会增加 length 长度
// 问题2:
// length,只记录本窗口访问的次数,新窗口访问的不算
// target="_blank" 不算length长度
// 问题3:
// 如果浏览页面过多,如何判断访问的页面
// 通过超链接来控制用户访问的页面和跳转的聂荣
// 例如:demo中
// 页面1,只能去页面2
// 页面2,只能去页面3
// 页面3,只能去页面4
// 页面4,只能去页面5
// 页面5,只能去页面6
// 页面6 就到头了
// 这样的话,每次跳转的内容就是固定的内容
BOM操作之浏览器常见事件
<script>
// 先定义JavaScript程序,此时还没有标签执行
// 不能给还没有定义的标签,添加事件
// 可以通过 load 事件,当页面的程序都执行结束之后
// 也就是有了页面标签之后,再执行JavaScript绑定程序
window.onload = function(){
// 当页面加载完毕,也就是页面其他程序都执行结束之后,再执行定义的程序
d4.onclick = function(){
console.log('我是第四个div');
}
}
</script>
<div id="d1">我是div1</div>
<div id="d2">我是div2</div>
<div id="d3">我是div3</div>
<div id="d4">我是div4</div>
<button id="loc">location打开百度</button>
<button id="ope">open打开百度</button>
<br>
<button id="c">关闭页面</button>
<script>
// BOM操作之浏览器常见事件
// 什么是事件
// 所谓的事件,就类似于一个约定
// 当触发条件时,就会执行,指定的程序
// 例如 clcik 点击事件
// 给标签绑定点击事件 当标签触发 点击条件时 执行绑定的程序
// click 点击事件 --- 事件类型
// onclick 绑定点击事件 , 给标签绑定一个事件类型
// funciton(){} 事件处理函数 , 触发事件时,执行的程序
// 也可以是一个已经定义好的函数
// 给div标签,绑定了一个事件类型
// 事件类型是点击事件类型
// 点div标签被点击时,触发执行程序
d1.onclick = function(){
console.log('我是div,有人点我');
}
// 需要绑定已经定义的函数
// 必须绑定函数名称,或者变量名称
// 绝对绝对绝对,不能有()
// 这里绑定的是,函数名称,变量名称中存储的, 函数的地址
// 如果有 () , d2.onclick = fun()
// 将 fun() 的执行结果, 绑定给事件
function fun(){
console.log('我是定义好的函数程序,绑定给div点击事件')
}
var fun2 = function(){
console.log(123)
}
// 给点击事件,绑定一个fun函数名称中,存储的函数地址
// 触发事件时,调用地址,找到对应的函数,执行函数程序
d2.onclick = fun ;
d3.onclick = fun2 ;
// load 事件 window.onload = function(){}
// 页面加载事件
// 当页面程序都加载结束之后,执行的程序
// 如果JavaScript程序定义在其他程序(html,css)之前,
// 绑定 load 事件 , 让程序在 页面加载完毕之后,再执行
// 不推荐使用这种方法
// 一般是将script标签,写在程序的最下方
// 外部导入js文件,要么放在head中
// 要么也放在body的最下方
// open 事件 window.open('url地址')
// 定义打开的页面 --- 新窗口打开页面
// window.location.href = 'url地址' 当前窗口打开页面
loc.onclick = function(){
window.location.href = 'https:/www.baidu.com';
}
ope.onclick = function(){
window.open('https:/www.baidu.com') ;
}
// scroll 事件 window.onscroll = function(){}
// 滚动条事件
// 当浏览器 滚动条 位置发生改变时,触发事件
window.onscroll = function(){
console.log('我滚了');
}
// resize 事件 window.onresize = function(){}
// 当页面大小发生改变时,触发事件
window.onresize = function(){
console.log('我改了');
}
// close 事件 window.close()
// 关闭当前页面事件
c.onclick = function(){
window.close();
}
// 总结
// 常用的:
// click scroll
// 其他不是很常用
// 有的有on,有的没有on,是JavaScript的固定语法形式,记住就行了
</script>
