window對象中 screenX screenY innerWidth的意義

時間 2021-08-13

標籤 javascript php html java 瀏覽器 ide 工具測試 this spa 欄目 Windows 简体版

原文原文鏈接

1.screenX screenY 表示窗口相對於屏幕左上角的位置。注意IE不支持此屬性。只讀屬性。javascript

IE 中的實現用screenLeft screenTop (等於screenY + 工具欄+菜單欄+地址欄的像素)php

2.innerWidth innerHeight窗口中文檔顯示區域的寬度，不包括邊框和滾動條,該屬性可讀可寫。html

IE8以前的瀏覽器不支持該屬性，IE中body元素的clientHeight屬性與該屬性相同。java

clientHeight與clientWidth屬性是隻讀的。瀏覽器

3.outerWidth表示窗口的寬度包括兩邊的border及滾動條的值， outerHeight 表示窗口的高度包括菜單，地址欄，工具欄等，屬性可讀性。ide

IE8 以前的瀏覽器不支持，且沒有提供替代的屬性工具

4.pageXOffset 整數只讀屬性，表示文檔向右滾動過的像素數 pageYOffset 整數只讀屬性，表示文檔向下滾動過的像素數。測試

IE8 以前的瀏覽器不支持，能夠這樣實現。document.body.scrollLeft document.body.scrollTopthis

測試代碼以下。spa

<html>
<head>
  <title>name</title>
</head>
<body>


<script>
   function openWin() {
      var myWindow = window.open('','_parent');
	  myWindow.document.write('<p style=""> thisis my window </p>');
	  if(myWindow.screenX) {
	      myWindow.document.write('<br> screenX:' + myWindow.screenX);
	  } elseif(myWindow.screenLeft) {
	     //IE
	      myWindow.document.write('<br> screenLeft:' + myWindow.screenLeft);
	  }
	  
	  if (myWindow.screenY) {
	      myWindow.document.write('<br> screenY:' + myWindow.screenY);
	  } elseif(myWindow.screenTop) {
	      //IE
	      myWindow.document.write('<br> screenTop:' + myWindow.screenTop);
	  }
	  if(myWindow.innerWidth) {
	    myWindow.document.write('<br> innerWidth:' + myWindow.innerWidth);
	    myWindow.document.write('<br> innerHieght:' + myWindow.innerHeight);
	  } else {
	     //IE
	    myWindow.document.write('<br> innerWidth:' + myWindow.document.body.clientWidth);
	    myWindow.document.write('<br> innerHeight:' + myWindow.document.body.clientHeight);
	  }
	  if (myWindow.outerWidth) {
	     myWindow.document.write('<br> outerWidth:' + myWindow.outerWidth);
	     myWindow.document.write('<br> outerHeight:' + myWindow.outerHeight);
	  } else {
	     //IE not support
	  }
	  myWindow.scrollBy(100,100);
	  if (myWindow.pageXOffset) {
	     myWindow.document.write('<br> pageXOffset:' + myWindow.pageXOffset);
	  } else {
	     myWindow.document.write('<br/> scrollLeft:' + myWindow.document.body.scrollLeft);
	  }
	  if (myWindow.pageYOffset) {
	    myWindow.document.write('<br> pageYOffset:' + myWindow.pageYOffset);
	  } else {
             myWindow.document.write('<br/> scrollTop:' + myWindow.document.body.scrollTop);
	  }


   }

</script>
<a href="javascript:;" onclick="openWin()"> new window</a>
</body>

</html>