window对象_window对象方法 - CSDN
精华内容
参与话题
  • JS window对象

    千次阅读 2019-02-28 20:48:19
    一、window对象 1.所有浏览器都支持window对象,它表示浏览器窗口; 2.所有JS全局对象、函数以及变量均自动成为window对象的成员; 3.全局变量为其属性; var index=0; console.log(window.index); 4.全局函数为其...

    一、window对象
    1.所有浏览器都支持window对象,它表示浏览器窗口
    2.所有JS全局对象、函数以及变量均自动成为window对象的成员;
    3.全局变量为其属性

    var index=0;
    console.log(window.index);
    

    4.全局函数为其方法

    var index = 0;
    window.showName();
    function showName() {
         console.log(window.index);
    }
    

    5.HTML DOM的document也是window对象的属性之一:window.document.getElementById(“header”);
    与document.getElementById(“header”);相同

    二、window尺寸
    写法一:

    console.log(window.screen.width);  //1600  浏览器总宽
    console.log(window.screen.availWidth);  //1600  浏览器实际宽
    console.log(window.screen.height);  //900  浏览器总高
    console.log(window.screen.availHeight);  //860  浏览器实际高
    

    写法二:

    document.documentElement.clientWidth;  //获取浏览器可视区域的宽,调试器不算
    document.documentElement.clientHeight;  //获取可视区域的高,调试器不算
    

    写法三(不建议使用body,需要清margin,不清则需要计算):

    console.log(document.body.clientWidth);  //body的实际宽,比浏览器可视区域的宽少16px,因为浏览器默认外间距margin为8px
    console.log(document.body.clientHeight);  //0,body里内容目前为0,body的实际高
    

    写法四:

    console.log(window.innerWidth);  //浏览器窗口的内部宽度
    console.log(window.innerHeight);  //浏览器窗口的内部高度
    

    三、其他window方法
    1.window.open();
    打开新窗口
    :window.open(url,name,feature,replace);
    若name使用名字已经存在,则不会创建一个新窗口,而是会返回对已经存在的窗口的引用;否则,创建一个新窗口

    2.window.close();
    关闭当前窗口

    var btn = document.getElementById("btn");
    btn.onclick = function () {
          window.close();
    }
    

    3.window.moveTo();
    移动当前窗口 被限制

    4.window.resizeTo();
    语法格式:window.resizeTo(width,height);
    width:必需,想要调整到的窗口的宽度,以像素计;
    height:可选,想要调整到的窗口的高度,以像素计

    window.resizeTo(200,200);  //不能直接使用,必须调整打开的窗口大小
    
    var win = window.open("txt.html", "", "width=100,height=100");
    win.resizeTo(300, 300);
    

    四、方法
    alert(); //提示框
    confirm(“请输入”); //带确认,取消按钮的提示框
    prompt(“请输入”,“2”); //带输入文本的提示框

    五、window对象里的计时器
    1.setTimeout():延迟一段时间,执行一次

    var count = 1;
    setTimeout(function () {
         count++;
         console.log(count);
    }, 1000);  //延迟1s,执行里面的函数一次
    

    例:用setTimeout()实现循环计时器:用函数的递归

    var count = 0;
    var time;
    showtime();
    function showtime() {
        count++;
        console.log(count);
        time = setTimeout("showtime()", 1000);
    }
    //停止加开启计时器
    var btnstop = document.getElementById("btnstop");
    var btnstart = document.getElementById("btnstart");
    btnstop.onclick = function () {
        clearTimeout(time);
    }
    btnstart.onclick = function () {
        time = setTimeout("showtime()", 1000);
    }
    

    2.setInterval():延迟一段时间,循环执行

    var time;
    var count = 0;
    showtime();
    function showtime() {
    time = setInterval(function () {
        count++;
        console.log(count);
     }, 1000);
    }
    var btnstop = document.getElementById("btnstop");
    var btnstart = document.getElementById("btnstart");
    btnstop.onclick = function () {
        clearInterval(time);
    };
    btnstart.onclick = function () {
        showtime();
    }
    
    展开全文
  • Window对象详解

    千次阅读 2016-09-21 14:10:44
    Window对象详解
    注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写
      否则会提示你1个错误信息 "引用的元素为空或者不是对象"
      -------------------------------------------------- -------------------
      对象属性
      window //窗户自身
      window.self //引用本窗户window=window.self
      window.name //为窗户命名
      window.defaultStatus //设定窗户状态栏信息
      window.location //URL地址,配备布置这个属性可以打开新的页面
      -------------------------------------------------- -------------------
      对象方法
      window.alert("text") //提示信息会话框
      window.confirm("text") //确认会话框
      window.prompt("text") //要求键盘输入会话框
      window.setIntervel("action",time) //每一隔指定的时间(毫秒)就执行一次操作
      window.clearInterval() //清除时间配备布置作用就是终止轮回
      window.setTimeout(action,time) //隔了指定的时间(毫秒)执行一次操作
      window.open() //打开新的窗户
      window.close() //关闭窗户
      -------------------------------------------------- -------------------
      成员对象
      window.event
      window.document //见document对象详解
      window.history
      window.screen
      window.navigator
      window.external
      -------------------------------------------------- -------------------
      window.history对象
      window.history.length //浏览过的页面数
      history.back() //撤退退却
      history.forward() //进步
      history.go(i) //到汗青详细登记单的第i位
      //i>0进步,i<0撤退退却
      -------------------------------------------------- -------------------
      window.screen对象
         window.screen.width //屏幕宽度
      window.screen.height //屏幕高度
      window.screen.colorDepth //屏幕色深
      window.screen.availWidth //可用宽度
      window.screen.availHeight //可用高度(除去任务栏的高度)
      -------------------------------------------------- -------------------
      window.external对象
      window.external.AddFavorite("地址","标题" ) //把网站新增到保藏夹
      -------------------------------------------------- -------------------
      window.navigator对象
      window.navigator.appCodeName //浏览器代码名
      window.navigator.appName //浏览器步伐名
      window.navigator.appMinorVersion //浏览器补钉版本
      window.navigator.cpuClass //cpu类型 x86
      window.navigator.platform //操作体系类型 win32
      window.navigator.plugins
      window.navigator.opsProfile
      window.navigator.userProfile
      window.navigator.systemLanguage //客户体系语言 zh-cn简体中文
      window.navigator.userLanguage //用户语言,同上
      window.navigator.appVersion //浏览器版本(包括 体系版本)
      window.navigator.userAgent
      window.navigator.onLine //用户否在线
      window.navigator.cookieEnabled //浏览器是否撑持cookie
      window.navigator.mimeTypes
      -------------------------------------------------- -------------------
      <html>
      <!--window对象方法举出例子脚本-->
      <script language="javascript">
      window.alert("您好!")
      </script>
      <script language="javascript">
      var action
      action=window.confirm("请选择操作...")
      if(action)
      document.write("您选择了接续操作")
         else
      document.write("您选择了勾销操作")
      </script>
      <script language="javascript">
      var info
      info=window.prompt("请输入一些必要的信息")
         document.write (info)
         </script>
      <script language="javascript">
      var i;i=0;
      function action(){
      i++;
      window.alert(i) //监督轮回情况
      if(i>=10)
      window.clearInterval(stop) //终止轮回
      }
      stop=window.setInterval("action()",1000)//1000毫秒=1秒
      </script>
      <script language="javascript">
      var i;i=0;
      function action(){
      i++;
      window.alert(i) //监督轮回情况
      }
      window.setTimeout("action()",1000)
      //不异的代码setTimeout只执行一次
      </script>
      </html>
      例子1: setInterval:每一经过指定毫秒值后计算1个抒发式 iTimerID = window.setInterval(vCode,iMilliSeconds[,sLanguage]) setTimeout:经过指定毫秒值后计算1个抒发式 TimerID = window.setTimeout(vCode,iMilliSeconds[,sLanguage]) 1个简略例子:2秒钟弹出1个窗户之后2秒钟后封闭:
      <script language="javascript">
      var b;
      function test(){
      b=window.open('''','''','''');
      window.setTimeout(aa,2000);
      }
      function aa(){
      b.close();
      }
      window.setInterval(test,2000);
      </script>
      例子2:
      ⑴index.html
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>window举出例子</title>
      </head>
      <script language="javascript">
      <!--
      //打开标准样式窗户
      function open1(){
      //配备布置标准样式窗户的一些状态值
      var windowStatus = "dialogWidth:260px;dialogHeight:180px;center:1;sta tus:0;";
      //在标准样式窗户中打开的页面
      var url = "test.html";
      //将标准样式窗户返回的值临时生存
      var temp = showModalDialog(url,"",windowStatus);
      //将刚才生存的值赋给文本输入框returnValue
      document.all.returnValue.value = temp;
      }
      //打开无菜单窗户
        function open2(){
      //配备布置窗户的一些状态值
      var windowStatus = "left=380,top=200,width=260,height=200,resizable=0 ,scrollbars=0,menubar=no,status=0";
      //在窗户中打开的页面
      var url = "test1.html";
      window.open(url,"noMenuWindowName",windowStatus);
      }
      //打开全屏窗户
      function open3(){
      //配备布置窗户的一些状态值
      var windowStatus = "fullscreen = 1";
      //在窗户中打开的页面
      var url = "test2.html";
      window.open(url,"noMenuWindowName",windowStatus);
      }
      -->
      </script>
      <body>
      <input type="button" name="btn1" value="打开标准样式窗户" onClick="open1()">
      <br>
      从标准样式窗户返回的值:
      <input type="text" id="returnValue" name="returnValue">
      <br><br>
      <input type="button" name="btn2" value="打开无菜单窗户" onClick="open2()">
      <br><br>
      <input type="button" name="btn3" value="打开全屏窗户" onClick="open3()">
      <br><br>
      </body>
      </html>
      ⑵test.html
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>在标准样式窗户中打开的页面</title>
      </head>
      <script language="javascript">
      <!--
      //将选中的值师长教师存到隐含对象上
      function ok(tempValue){
      document.all.selectedValue.value = tempValue;
      }
      //封闭页面时将隐含对象中的值传回
      function willReturnValue(){
      window.returnValue = document.all.selectedValue.value;
      window.关了();
      }
      -->
      </script>
      <body onUnload="willReturnValue()" bgcolor="#D4D0C8">
      <center>
      请单选您的爱好:
      <br>
      <br>
      <input type="radio" name="lover" value="体育" onClick="ok(this.value)">体育
      <br>
      <input type="radio" name="lover" value="休闲文娱" onClick="ok(this.value)">休闲文娱
      <br>
      <input type="radio" name="lover" value="看书读报" onClick="ok(this.value)">看书读报
      <br>
      (3)test1.html
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>在无菜单窗户中打开的页面</title>
      </head>
      <body bgcolor="#D4D0C8">
      <center>
      请单选您的爱好:
      <br>
      <br>
      <input type="radio" name="lover" value="体育">体育
      <br>
      <input type="radio" name="lover" value="休闲文娱">休闲文娱
      <br>
      <input type="radio" name="lover" value="看书读报">看书读报
      <br>
      <input type="radio" name="lover" value="琴棋字画">琴棋字画
      </center>
      </body>
      </html>
      ⑷test2.html
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>在全屏窗户中打开的页面</title>
      </head>
      <body bgcolor="#D4D0C8">
      <center>
      请单选您的爱好:
      <br>
      <br>
      <input type="radio" name="lover" value="体育">体育
      <br>
      <input type="radio" name="lover" value="休闲文娱">休闲文娱
      <br>
      <input type="radio" name="lover" value="看书读报">看书读报
      <br>
      <input type="radio" name="lover" value="琴棋字画">琴棋字画
      <br>
      <br>
      <input type="button" name="btn1" value="封闭" onClick="window.关了()">
         </center>
      </body>
      </html>
      <input type="radio" name="lover" value="琴棋字画" onClick="ok(this.value)">琴棋字画
      <input type="hidden" id="selectedValue" name="selectedValue">
      </center>
      </body>
      </html>
    展开全文
  • Window对象的常用方法

    千次阅读 2018-07-23 19:34:51
     alert()、confirm()、prompt() 分别用于弹出警告对话框、确认对话框和提示输入对话框。 close() 关闭窗口。 focus()、blur() 让窗口获得焦点、失去焦点。... 打开一一个新的顶级窗口,用于装载新的...

     

     alert()、confirm()、prompt() 分别用于弹出警告对话框、确认对话框和提示输入对话框。
    close() 关闭窗口。
    focus()、blur() 让窗口获得焦点、失去焦点。
     open() 打开一一个新的顶级窗口,用于装载新的URL所指向的地址,并可指定一系列的新属性,包括隐藏菜单等。:
    resizeBy()、resizeTo() 重设窗口大小。
    scrollBy()、scrollTo() 滚动当前窗口中的HTML文档。
    setTimeout()、clearTimeout() 设置、删除定时器。
    closed 该属性返回-一个 boolean值,用于判断该窗口是否处于关闭状态。
    frames[] 返回该窗口内包含的Frame对象,每个Frame对象又是一个window对象。
    history 返回该窗口的浏览历史。
    location 返回该窗口装载的HTML文档的URL
    navigator 返回浏览当前页面的浏览器。
    parent 如果当前窗口是一个Frame,则该属性返回包含本Frame的窗口,  即该Frame的直接父窗口。
    screen 返回当前浏览者的屏幕对象。
    self 返回自身。
    top 如果当前窗口是-一个Frame,则该属性指向包含本Frame的顶级父窗口。
    setInterval()、clearlnterval() 也是设置定时器。推荐使用setInterval() 和clearlnterval ()。
    moveBy()、moveTo() 移动窗口。
    defaultStatus、status  返回浏览器状态栏的文本
    name 返回该窗口的名字。
    print() 打印当前窗口或Frame。
    document 返回该窗口内装载的HTML文档

    我们实现一些比较常用的功能:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 状态栏的动画文字 </title>
    </head>
    <body onload="stack();">
    	<script type="text/javascript">
    		// 自定义的状态文字
    		var statusText = "自定义的动画状态栏文字...";
    		var out = "";
    		// 动画间隔时间
    		var pause = 25;
    		// 动画宽度
    		var animateWidth = 20;
    		var position = animateWidth;
    		var i = 0 ;
    		var stack = function() {
    			if (statusText.charAt(i) != " ") {
    				out = "";
    				// 将0到i-1个字符拼成输出字符串
    				for (var j = 0; j < i; j++)
    				{
    					out += statusText.charAt(j);
    				}
    				// 增加一定宽度空格
    				for (j = i; j < position; j++)
    				{
    					out += " ";
    				}
    				// 将第i个字符添加到输出字符串里去
    				out += statusText.charAt(i);
    				for (j = position; j < animateWidth; j++)
    				{
    					out += " ";
    				}
    				window.status = out;
    				// 如果后出来的字紧靠了前面字符串
    				if (position == i)
    				{
    					animateWidth++;
    					position = animateWidth;
    					// i加1,对应为多出现一个字符
    					i++;
    				}
    				else
    				{
    					position--;
    				}
    			}
    			else
    			{
    				i++
    			}
    			if (i < statusText.length)
    			{
    				setTimeout("stack()",pause);
    			}
    		}
    	</script>
    </body>
    </html>
    

     

    展开全文
  • js的window对象与方法

    千次阅读 2018-09-24 11:21:46
    一、window对象 window对象 是BOM中所有对象的核心。BOM Browser Object Model 二、window属性 1.(位置类型-获得浏览器的位置) alert(screenX) alert(screenY) //IE 左边距 alert(screenLeft) 上边距 ...

    一、window对象  

    window对象 是BOM中所有对象的核心。BOM    Browser  Object Model

    二、window属性    

    1.(位置类型-获得浏览器的位置)    

    alert(screenX)            

    alert(screenY)

    //IE
    左边距
    alert(screenLeft)
    上边距
    alert(screenTop)
     
    //FF
    左边距
    alert(screenX)
    上边距
    alert(screenY)
    

     (获得浏览器的尺寸)

          FF:window.innerWidth  获得窗口的宽度          

                window.innerHeight  获得窗口的高度 

    //FF:
    alert(window.innerWidth);
    alert(window.innerHeight);
    //IE:
    alert(document.documentElement.clientWidth)
    alert(document.documentElement.clientHeight)
    

    三、window方法

    .js中指定当前打开窗口的父窗口:window.opener,支持opener.opener…的多重继续.

    window.open(), (打开窗口)
    window.close(), (关闭一个窗口)
    window.self()(窗口本身)  
    window.focus()(使当前的窗口在所有窗口之前. )
    window.status=”内容” (js中状态栏显示内容:)
    window.navigate(”http://www.google.com”); (js中的窗口重定向:)
    window.print() (js中的打印:)
    window.prompt(”message”,”defaultreply”); (js中的提示输入框:)
    window.scroll(x,y) (js中的窗口滚动条)
    window.scrollby(js中的窗口滚动到位置:)
    window.history.back()返回上一页,window.history.forward()返回下一页,
    window.history.go(返回第几页,也可以使用访问过的url) 
    window.createElement
    

     

    展开全文
  • window对象用法

    千次阅读 2017-12-22 09:33:34
    window对象用法:1. open方法语法格式:window.open(URL,窗口名称,窗口风格)功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页。说明: open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL...
  • window对象方法

    2019-03-20 19:41:57
    文章目录window对象的方法和属性 window对象的方法和属性 window对象是JS提供的一个内置对象,该对象是最大的一个内置对象,其中有很多方法和属性,可以直接调用 window.location对象用于获取当前页面的地址(URL)...
  • JS中Location使用详解

    千次阅读 2017-05-04 22:44:01
    javascript中 location用于获取或设置窗体的URL,并且可以用于解析URL,是BOM中最重要的对象之一,下面我们就来详细探讨下Location对象的使用。javascript中location地址对象描述的是某一个窗口对象所打开的地址。要...
  • Window 对象 DOM Window 尺寸 Window Screen availWidth availHeight 其他方法 目录导航 浏览器对象模型((BOM) 浏览器对象模型(Browser Object Model) 使得 JS 拥有与浏览器交互的能力。 Window 对象 ...
  • 获取iframe中window对象的方法

    万次阅读 2014-06-13 17:22:47
    上面这行代码获取到的就是iframe中的window对象. 如果运用JQuery的话,需要记得$这个关键字在有iframe的页面中有两个. 一个是全局变量window.$ 还有一个是iframe中的$,获取iframe中的$可以通过
  • iframe中获取父元素的window对象

    千次阅读 2016-09-30 15:43:57
    1. 父窗体获取iframe的window对象    var mainFrame = document.getElementById("myFrame"); var subDocument = mainFrame.contentDocument || mainFrame.contentWindow.document;   2. iframe中...
  • JS/JavaScript中概念的区分:global对象、window对象、document对象 1、Global Object (全局对象, global对象) ①JavaScript 中有一个特殊的对象,称为全局对象(Global Object),它及其所有属性都可以在...
  • JS中document对象 && window对象

    万次阅读 多人点赞 2018-05-14 19:09:35
    所有的全局函数和对象都属于Window对象的属性和方法。区别: 1、window 指窗体。Window 对象表示浏览器中打开的窗口。 document指页面。document是window的一个子对象、一个对象属性。 2、用户不能改变 document....
  • 通过jsBridge方法,H5可以调用客户端(ios,android)的内部方法,同样,客户端也需要能调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用,并没有绑定window对象下面...
  • window location跳转

    万次阅读 2019-06-20 10:38:56
    "top.location.href"是最外层的页面跳转 ...location是window对象的属性,而所有的网页下的对象都是属于window作用域链中(这是顶级作用域),所以使用时是可以省略window。而top是指向顶级窗口对象,parent...
  • JQuery获取iframe中window对象的方法

    千次阅读 2014-07-10 17:40:17
    上面这句话获取到的就是iframe中的window对象. 如果运用JQuery的话,需要记得$这个关键字在有iframe的页面中有两个. 一个是全局变量window.$ 还有一个是iframe中的$,获取iframe中的$可以通过 document....
  • 可能比较乱,但是全部看完或许对global和window对象的理解还是有帮助的。 一个关于window和global区别的链接,可以更方便去理解:https://segmentfault.com/q/1010000003054375 关于定义和声明的区别:...
  • 深入理解Javascript window对象

    千次阅读 2014-06-08 13:15:31
    首先看我们的源代码。 深入理解Javascript console.log(this); var a1 = 'a1'; var f1 = (function() { var a2 = 'a2';
  • var createapprove = { version : $("#versionname").val(), channel : $("#channel").val(), package : $("#package").val(), count : count.data,
  • 转发:https://blog.csdn.net/jarniyy/article/details/62424919var iframe=document.getElementById("xxx");//父窗口获取iframe子窗口对象...//iframe窗口的window对象var iframed=iframew.document;//...
  • 在第一个页面进行如下设置 new var a = ['黄忠'] ...$('#new').click(function(){ ...window.open('index2.html','index2',) ...console.log(window.opener.a) ...可以轻松传递对象,数组等复杂变量
1 2 3 4 5 ... 20
收藏数 540,058
精华内容 216,023
关键字:

window对象