JavaScript中的BOM操作（浏览器对象模型）Part②

最新推荐文章于 2024-07-12 16:27:40 发布

Submerge~

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量161

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/MixedSignals/article/details/105128103

版权

▲获取浏览器地址栏信息

 console.log(window.location);

①window.location.reload()：页面重新加载/刷新方法
不能直接写，否则会一直刷新。一般是判断和事件绑定执行，不能单独执行。点击刷新，5秒钟之后刷新。移动端浏览器刷新不方便点击，可以设定按钮点击

<body>
<button id="btn">点击刷新</button>
		<script>
		 btn.onclick = function()
		 {
            window.location.reload();
         }
		</script>
</body>

在这里插入图片描述
②window.location.herf：获取地址栏的信息内容，中文显示为 %两位十六进制数值，可以将%XX转化为中文

// 直接获取地址栏信息
console.log(window.location.href);
// 将地址栏信息中文正常显示   decodeURIComponent()
console.log(decodeURIComponent(window.location.href)) ;

在这里插入图片描述
③window.location.host：获取地址栏信息中主机地址信息，当页面服务器运行时，可以获取服务器主机地址信息，一般是IP地址或者域名
④window.location.port：获取地址栏信息中端口的数值，所谓的端口是计算机程序与计算机本身沟通的通道。每个软件都有一个独立的端口，此时获取到的往往是服务器运行的端口
⑤window.location.search：获取地址栏信息中传参的数据，在浏览器地址栏中可以实现数据的传递，也就是传递参数。格式是地址?传参的数据，获取的是 ?以及之后的内容

▲编程导航
通过JavaScript可以给所有标签添加事件，触发页面跳转效果

<div id="d">点我去百度</div>
<script>
d.onclick = function(){
window.location.href = 'https://www.baidu.com';//设定跳转地址是百度
}
</script>

<div id="d2"></div>
// 5秒以后跳转网站，通过定时器实现
var int = 5; // 定义变量,存储倒计时的起始时间
        setInterval( function(){// 定义定时器
        d2.innerHTML = `请您注意,${int}秒之后,跳转至新浪页面`;// 输出内容,倒计时时间是变量
            int--;// 倒计时时间做 -- 递减操作
            if(int == -1){ // 倒计时时间到达,执行页面跳转操作
                window.location.href = 'https://www.sina.com';
            }
        } , 1000);

▲浏览器信息
console.log(window.navigator);

console.log(window.navigator.userAgent);// 获取浏览器版本号,内核,型号,等相关信息
console.log(window.navigator.appName); // 浏览器软件名称，任何一个浏览器,获取结果都是Netscape网景公司
console.log(window.navigator.appVersion); // 浏览器软件版本信息
console.log(window.navigator.platform);// 本地电脑,操作系统信息

▲浏览器的跳转
console.log(window.history);
window.history.lenght：当前窗口一共访问过几个页面
window.history.back()：功能就是后退，返回到上一个访问的页面
window.history.forward()：功能就是前进，前进到下一个访问的页面
window.history.go(数值)：跳转到指定位置的页面，通过设定跳转几个页面来实现。+数值就是前进，-数值就是后退，设定的数值是跳转的次数

问题1：只要通过超链接访问，或者window.location.herf跳转访问的页面，即使是重复页面也会增加length长度
问题2：length只记录本窗口访问的次数，新窗口访问的不算target="_blank" 不算length长度
问题3：如果浏览页面过多，通过超链接来控制用户访问的页面和跳转的内容。如页面1只能去页面2，页面2只能去页面3，页面3只能去页面4，页面4只能去页面5。这样的话，每次跳转的内容就是固定的内容

Submerge~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的BOM操作（浏览器对象模型）Part②

▲获取浏览器地址栏信息 console.log(window.location);①window.location.reload()：页面重新加载/刷新方法不能直接写，否则会一直刷新。一般是判断和事件绑定执行，不能单独执行。点击刷新，5秒钟之后刷新。移动端浏览器刷新不方便点击，可以设定按钮点击<body><button id="btn">点击刷新</but...
复制链接

扫一扫