onload、window.open、同源策略、history对象、location对象、navigator对象

最新推荐文章于 2024-12-08 06:59:07 发布

喵喵程序媛

最新推荐文章于 2024-12-08 06:59:07 发布

阅读量725

点赞数

文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_47067248/article/details/107867340

版权

本文深入探讨了网页加载事件的区别，如window.onload与DOMContentLoaded，以及如何使用window.open和window.close进行页面操作。同时，详细解析了同源策略、URL结构、history与location对象的使用方法，以及如何通过navigator对象检测浏览器类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.load

window.onload 页面全部加载事件，包括CSS、页面图像都加载完才会触发该事件。
window.addEventListener(“DOMContentLoaded”,function(){}) 只要DOM树结构加载完就会触发，更快些。

2.window.open() / window.close()

 var windowObjectReference =  window.open(strURL,[strWindowName], [strWindowFeatures]);
                                           地址,     页面名 ,        样式（如宽高的设定）

windowObjectReference: 调用open方法的返回值,代表了新页面的window对象

同源: 协议/host/端口号三者完全一致

同源策略下可以调用其它window方法

以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败，域名不同
• https://www.a.com/test/index.html ----失败，协议不同
• http://www.a.com:8080/test/index.html ----失败，端口号不同

URL: 统一资源定位符,表示某一个资源在网络上的地址

  protocol:    //host[:port]/path/[?query]#fragment
        协议:  http :80  /https  :443
        host:  ip 地址  ->  域名 -> 子域名(服务器名 www  mail)+主域名
                 本地打开服务 127.0.0.1 本机ip地址   localhost
                 局域网  192.160.0.100
                 无线网  192.168.43.90
         port: 端口号
         path: 文件地址
        query: 参数 以 ? 键值对的形式表示，多个键值对通过 & 符号分隔  ?name=zhangsan&age=12
     fragment: 片段  # 后面的内容，常见于链接，锚点

3.history对象

history 记录当前页面跳转历史, 只能记录数量与方向,不能记住地址
history.length 记录生成的记录栈的长度
history.go(n) n代表往前或者往后跳转的次数
history.forward() 往前一页 go(1)
history.back() 后退一页 go(-1)

4.location对象

location.search()查询参数

跳转到某一个页面
- window.open(url)
- location.href = url
- location.assign(url)
- location = url
- location.replace(url) 不留痕迹

location传中文

// decodeURI  把 encodeURI 编码转回去

var string = decodeURI(location.search);

 ?name=%E6%9D%8E%E7%99%BD&age=12
 >>>
  ?name=李白&age=12

navigator对象

navigator.userAgent 分辨浏览器的环境（结合正则）

    console.log(navigator.userAgent);

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

var browserName = navigator.userAgent.toLowerCase(); 
//区分手机端还是PC端
isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(browserName));
//判断浏览器
isFirefox = /firefox/i.test(browserName);
isChrome = /chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName);

if(isChrome){
    alert("chrome浏览器");
}
if(isFirefox){
    alert("火狐浏览器");
}

if(isMobile){
    alert("移动端");
}

// 监听联网
window.ononline = function (){
    console.log(navigator.onLine); // true
}
window.onoffline = function (){
    console.log(navigator.onLine); // false
}