JavaScript中window对象及open和close使用

最新推荐文章于 2023-11-14 11:18:06 发布

刘远山

最新推荐文章于 2023-11-14 11:18:06 发布

阅读量2k

点赞数

分类专栏：前端专题学习汇总

本文链接：https://blog.csdn.net/weixin_39218464/article/details/108924337

版权

前端专题学习汇总专栏收录该内容

67 篇文章 1 订阅

订阅专栏

Window对象

是一个顶级对象，不是任何对象的属性，所以可以不写window.xxx而直接使用内部的属性和方法。

实际上，在web前端开发时，所有的全局变量都自动成为window对象的属性

Window对象的属性

Screen
History
Location
Navigator
Document（DOM)

Window对象的方法

alert
confirm
prompt
setIntervel
setTimeout
clearInterval()
open
Close(只能关闭使用js打开的浏览器窗口）

Screen对象

根据显示器宽度动态引入CSS外部文件
方法：给link标记添加id，根据width属性值修改link中的href值。

在这里插入图片描述

History对象

方法：
back()：后退一个历史页面
forward()：前进一个历史页面
go(路径深度)

Location对象

在这里插入图片描述

Confirm方法

让用户选择是否继续进行浏览器默认行为。使用return 将confirm的用户选择结果返回给某个事件，true时将会继续该事件的默认行为，false时将会中止该事件的默认行为。

setTimeOut

格式:
setTimeOut(function(){},毫秒数)

setInterval与clearInterval

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

时间日期函数

获取当前日期时间的方法：
var dd=new Date();//此时dd就是当前的日期时间，是一个日期时间型变量
可用以下方法获取或设置具体时间
getDate()从 Date 对象返回一个月中的某一天
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth()从 Date 对象返回月份 (0 ~ 11)。getFullYear()从 Date 对象以四位数字返回年份。getHours()返回 Date 对象的小时 (0 ~ 23)。getMinutes()返回 Date 对象的分钟 (0 ~ 59)。getSeconds()返回 Date 对象的秒数 (0 ~ 59)。

Open/close方法

open的格式
window.open([url,][name,][features,][replace])
url:要打开的网页路径
Name:窗口名称（通常使用target属性值）
Features:窗口特征，属性列表
Replace:是否替换浏览历史条目
Close方法：
window.close();不同浏览器支持度不同，但是都支持关闭由js打开的浏览器窗口

open方法举例

window.open 基本语法： window.open(pageURL,name,parameters);具体示例window.open(‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no’)相关参数说明window.open 弹出新窗口的命令；　‘page.html’ 弹出窗口的文件名；　　‘newwindow’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；　　height=100 窗口高度；　　width=400 窗口宽度；　　top=0 窗口距离屏幕上方的象素值；　　left=0 窗口距离屏幕左侧的象素值；　　toolbar=no 是否显示工具栏，yes为显示；　　menubar，scrollbars 表示菜单栏和滚动栏。　　resizable=no 是否允许改变窗口大小，yes为允许；　　location=no 是否显示地址栏，yes为允许；　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>返回</button>
    <a href="http://www.baidu.com" onclick="return false">点我进到百度</a>
    <button onclick="closeWin()">关闭这个窗口</button>
    <script>
        //----window对象是全局对象，全局定义的所有变量和函数其实都默认地成为了window对象中的属性和方法
        // console.log(window);
        // window.alert("大家好");
        // var aaa = 123;
        // console.log(window);
        // function aaff(){
        //     aabbcc = 222;//这里其实是造价于window.aabbcc = 222;
        //     var aaabbb = 333;
        // }
        // aaff();
        // console.log(aabbcc);
        // console.log(window);
        // //-----screen对象,客户端显示器的信息
        // console.log("你的显示器分辨率为：height."+window.screen.height)
        // console.log("你的显示器分辨率为：width."+window.screen.width)
        // //
        //------history对象
        // function backurl(){
        //     window.history.back();
        // }
        //---------location对象
        // console.log(window.location);
        //-----navigator对象
        //console.log(window.navigator);
        //以下是window对象的常用方法
        //----------confirm方法
        // function clickA(){
        //     var confirmValue;
        //    confirmValue =  confirm("你想打开这个链接吗？")//用户选择是或否，通过返回值来继续进行下一步操作
        //    console.log(confirmValue);
        //    return confirmValue;
        // }
        //---------setTimeOut方法
        // setTimeout(function(){
        //     document.write("这个警告框将在网页打开5秒后显示")
        // },5000);
        //-----------setInterval和clearInterval方法
        // var count = 0;
        // var setInvalId = setInterval(function() {
        //     count++;
        //     document.write(count);
        // }, 1000);
        // setTimeout(() => {//箭头函数的写法
        //     clearInterval(setInvalId);
        // }, 8000);
        function closeWin(){
            //window.close();//兼容性的问题
            window.open("about:blank","_self");//用打开空白页的方式模拟
        }
    </script>
</body>
</html>

刘远山

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中window对象及open和close使用

Window对象是一个顶级对象，不是任何对象的属性，所以可以不写window.xxx而直接使用内部的属性和方法。实际上，在web前端开发时，所有的全局变量都自动成为window对象的属性Window对象的属性ScreenHistoryLocationNavigatorDocument（DOM)Window对象的方法alertconfirmpromptsetIntervelsetTimeoutclearInterval()openClose(只能关闭使用js打开的浏览器窗口）
复制链接

扫一扫