js浏览器对象

最新推荐文章于 2024-08-09 21:30:00 发布

单身公镞

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量318

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/u012101045/article/details/51211157

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS浏览器对象

window对象

1.window对象：

① window对象是BOM的核心，指当前的浏览器窗口。

② 所有js全局对象、函数以及变量均自动成为window对象的成员。甚至HTML DOM的document也是window对象的属性之一。

③ 由于window对象包含绝大多数对象、函数以及变量，在使用过程中，经常缺省。

2.window尺寸：

① window.innerHeight ---浏览器窗口的内部高度，并不包含标题栏、工具栏等部分

② window.innerWidth ---浏览器窗口的内部宽度

示范代码如下：

<body οnlοad="getDim()">
<p id="pid"></p>
<script>
    function getDim(){
        var height = window.innerHeight;
        var width = window.innerWidth;
        document.getElementById("pid").innerHTML = "窗口宽度为："+ width + "窗口高度为：" + height;
    }
</script>
</body>

结果显示如下：

3.window方法：

① window.open(URL,name,specs,replace)---打开新窗口

参数

说明

URL

可选。打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口

name

可选。指定target属性或窗口的名称。支持以下值：

_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

specs

可选。一个逗号分隔的项目列表。支持以下值：

channelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

当所有参数为空时，该方法的调用将打开一个空白的网页。

② window.close() ---关闭当前窗口

计时器对象

1.计时事件

① 使用JavaScript来在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。这样的事件，称为计时事件。

2.计时方法

① setInterval() ---间隔指定的毫秒数不停地执行指定的代码

② clearInterval() ---用于停止setInterval()方法执行的函数代码

③ setTimeout() ---暂停指定的毫秒数后执行指定的代码

④ clearTimeout() ---用于停止执行setTimeout()方法的函数代码

注意：setInterval()与setTimeout()方法的使用方法相似，区别在于：setInterval()方法会间隔指定毫秒数循环执行，而setTimeout()只会在暂停后执行一次，如需循环执行，则需要调用执行的自身函数。示例如下：

<body οnlοad="showTime()">
<p id="pid"></p>
<button οnclick="stopTime()">时间停止</button>
<script>
    /**setTimeout(code,delayTime)方法有两个参数
     * code:将被执行的代码段
     * delayTime：执行代码的暂停时间，单位是毫秒
     */
    var mytime;
    function showTime(){
        //初始化Date对象
        var date = new Date();
        //获取时间并转化为字符串
        var time = date.toLocaleTimeString();
        alert(time);
        mytime = setTimeout(function(){
            showTime();
        },3000);
    }
    function stopTime(){
        clearTimeout(mytime);
    }
</script>
</body>

3.程序示范---时钟显示

<span style="font-size:14px;"><body>
<p id="pid"></p>
<button οnclick="stopTime()">时间停止</button>
<script>
    /**setInterval(code,delayTime)方法有两个参数
     * code:将被执行的代码段
     * delayTime：执行代码的间隔时间，单位是毫秒
     */
    var mytime = setInterval(function(){
        showTime();
    },1000);
    function showTime(){
        //初始化Date对象
        var date = new Date();
        //获取时间并转化为字符串
        var time = date.toLocaleTimeString();
        document.getElementById("pid").innerHTML = time;
    }
    function stopTime(){
        //调用clearInterval()停止setInterval中执行的代码段
        clearInterval(mytime);
    }
</script>
</body></span>

History对象

1.history对象

① window.history对象包含浏览器的历史（URL）的集合。

2.history方法

① history.back() ---与浏览器后退按钮功能相同

② history.forward() ---与浏览器前进按钮功能相同

③ history.go() ---进入历史中的某个页面

第一个页面：

<a href="history对象.html">前往history对象页</a>

history对象.html :

<body>
<input id="username" type="text" placeholder="请输入用户名" />
<button οnclick="goTo()">登录</button>
<script>
    function goTo() {
        var name = document.getElementById("username").value;
        if(name =="dchen"){
            history.go(-1);
        }else{
            alert("用户名错误，请重新输入！")
        }
    }
</script>
</body>

Location对象

1.location对象

① window.location对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面。

2.location对象常用属性

① location.hostname ---返回web主机的域名

② location.pathname ---返回当前页面的路径和名称

③ location.port ---返回web主机的端口

④ location.protocol ---返回所用的web协议（http://或https://）

⑤ location.href ---返回当前页面的URL地址

⑥ location.assign() ---该方法用于加载新的文档

Screen对象

1.Screen对象

① window.screen对象包含有关用户屏幕的信息

2.Screen对象的常用属性

① screen.availWidth ---可用的屏幕宽度

② screen.availHeight ---可用的屏幕高度

③ screen.Height ---屏幕高度

④ screen.Width ---屏幕宽度

<span style="font-size:14px;"><body>
<p id="pid"></p>
<script>
    document.getElementById("pid").innerHTML = "屏幕可用高度为：" + screen.availHeight 
            + "屏幕可用宽度为：" + screen.availWidth 
            + "屏幕高度为：" + screen.height 
            + "屏幕宽度为：" + screen.width;
</script>
</body></span>