11.WEB浏览器_web浏览器,主页url,unix,windows-CSDN博客

本文链接：https://blog.csdn.net/qq_52301431/article/details/125241799

11、WEB浏览器

js的兼容性与安全性问题。

BOM：browser object model 浏览器的对象模型通过window 对象来控制BOM，在客户端JS 中，window 对象是全局对象，所有的表达式都在当前的环境中计算

window 对象下的属性和方法：

（1）浏览器可以通过调用系统对话框，向用户显示信息。系统提供了三个函数，可以完成系统对话框的操作。

【注】window 下的函数都可以省略window 直接去调用

// alert()：直接弹出警告框，参数是警告框上显示的内容 alert("警告信息自定义");

// confirm()：弹出一个带有确定和取消的警告框，参数是给用户的选择提示，返回值true 或false var res= confirm("您确定删除此座位么？");

// prompt()：弹出一个带输入的提示框，参数1 是要在提示框上显示的内容，参数2 是输入框内默认的值，返回值即输入值或null var res= prompt("请输入一个数",0);

（2） window.open() 参数：要加载的URL/窗口的名称或者窗口的目标/一串具有特殊意义的字符串

// 【注】如果只有第一个参数，多次调用open 方法会打开多个新标签页面，加载url open("百度一下，你就知道")

// 【注】第二个参数，是给打开的新窗口起一个名字，多次调用open 方法也只会打开一个新标签页面 open("百度一下，你就知道","百度")

// 【注】第三个参数，定义弹出的新浏览器窗口的大小，宽高不小于100，偏移不能为负值（相对于显示器窗口） open("百度一下，你就知道","百度",'width=400,height=400,top=200,left=200')

// opener对象：打开当前窗口的父窗口的window 对象，window.opener.document.write("子窗口可对父窗口进行操作")，ie不支持

（3） location对象

window.location===window.document.location location对象可以看作是浏览器地址栏的输入框

【注】它提供了与当前窗口中加载的文档的相关信息（可获取可修改），还提供了一些导航功能

location的属性：hash,host,hostname,href,pathname,port,protocol,search，描述统一资源定位符 URL

hash 指锚点，指当页面发生点击，页内跳转，这时url 中会存在"#锚点值"，location.hash 即为锚点值

host 指主机名(域名/IP)+端口号，hostname 主机名，href 完整url，pathname 资源目录，port 端口，protocol 协议，search url带问号? 后的搜索词 url==》protocol://host:prot/pathname?search#hash

location的方法：assign()/reload()/replace() window.location.assign("url")---跳转到指定的URL，同location.href，可通过浏览器后退键返回之前页面 window.location.reload("url")---不传参为重载，传参true 时会忽略浏览器缓存进行重载 window.location.replace("url")---用新的URL 替换当前页面，不能通过返回键返回之前页面

（4） history 是window 对象的属性，它保存这个用户上网的记录，代表的是浏览器地址栏左侧的三个按钮"刷新/前进/后退" history 对象的属性：length---当前窗口加载过的页面个数 history 对象的方法：back()---返回上一条记录/forward()---前进到下一条记录 go()---参数为0则重载当前页面，参数为正数则前进对应数量的记录，参数为负数则后退对应数量的记录

####11.1 客户端JavaScript

呈现静态信息的页面叫做文档：

– window 是web浏览器的一个窗口或窗体，是JavaScript特性和API的主要接入点；

– window 对象是全局对象，处于作用域链的最顶层；

– 用户的体验不应完全依赖于JS，但JS能显著的提升用户体验；

#####11.1.1 Window对象-定时器

定时器是指在指定的时间单一或循环执行一个动作。

setTimeout()：在指定的毫秒数之后单一执行一个函数，三个参数：

参数1：要执行的函数名，不带小括号；

参数2：要等待的毫秒数，多少毫秒之后执行；

参数3：可忽略，是指给参数1这个函数传递的参数；
```
function st (argument) {
    console.log('a' + argument);
}
//三个参数
setTimeout(st, 2000, '打印我到控制台');
```
只执行一次，只调用一次指定的函数，就一次。

如果要想取消这个定时器也是可以的，使用clearTimeout()；

function st (argument) {
    console.log('a' + argument);
}
//开启一个定时器，并把返回值存储下来
var stid = setTimeout(st, 2000, '打印我到控制台');
//清除这个定时器
clearTimeout(stid);

setInterval()：在指定的毫秒间隔里重复执行一个函数，三个参数：

参数1：要执行的函数名，不带小括号；

参数2：执行的间隔毫秒数；

参数3：可忽略，是指给参数1这个函数传递的参数；
```
function st (argument) {
    console.log(new Date().toString() + '：' + argument);
}
//开启一个定时器
setInterval(st, 2000, '打印我到控制台');
```
每隔2s执行依次，往复循环执行。

一样的，setInterval()设置的定时器任务也是可以清除的：

var n = 0;
function st (argument) {
    n++;
    console.log(n, new Date().toString() + '：' + argument);
    //10次后清除定时器
    if(n >= 10){
        clearInterval(stid);
    }
}
//开启一个定时器，并把返回值存储下来
var stid = setInterval(st, 2000, '打印我到控制台');

#####11.1.2 浏览器定位和导航

window的location属性引用的是Location对象；

href属性是一个字符串，表示当前页面的完整URL地址；
```
//实现页面跳转
window.location.href = 'http://www.jd.com';
```

reload()：重新加载当前页面；

//也就是传说中的刷新当前页面
window.location.reload();

window.location的更多属性：protocol、host、hostname、pathname、search；
```
console.log(window.location);
```

#####11.1.3 浏览器navigatior

window的navigator属性返回的是浏览器厂商及版本信息；

appName:浏览器全称; IE浏览器是“Microsoft Internet Explorer”；其它大多浏览器返回的是“Netscape”，主要是为了代码兼容；
appVersion:包含浏览器厂商和版本信息的字符串; 字符串开头的数字表示他是第4代或第5代兼容浏览器；没有标准格式，不用来判断浏览器；
userAgent:通常包含appVersion里面的所有信息，还有其他相关信息; 没有标准格式
platform:运行浏览器的操作系统;

console.log(window.navigator);

#####11.1.4 Window对象-对话框

window有三个方法向用户提供简单的对话框：

alert():向用户显示一条信息，并等待用户关闭窗口;
confirm():显示一个弹窗，要求用户单击确定或者取消，返回true或者false;
prompt():显示一个弹窗，等待用户输入字符串，并返回输入的字符串;
这三个方法会产生阻塞，也就是在用户做出反应之前，代码不会继续往下执行；

alert(window.navigator);

11.2 条件注释

虽然不规范，但在解决IE兼容性问题上非常有用：

//摘抄的JD首页的代码
<!--[if lte IE 6]>
    <script src="//misc.360buyimg.com/mtd/pc/index/home/ie6tip.min.js"></script>
<![endif]-->
<!--[if lte IE 14]>
    <script src="//misc.360buyimg.com/mtd/pc/index/home/ie6tip.js"></script>
<![endif]-->

11.3 安全性问题