JavaScript中window对象及open和close使用

    科技2022-07-27  127

    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>
    Processed: 0.010, SQL: 8