JavaScript Window对象属性方法小结

最新推荐文章于 2023-11-02 10:23:28 发布

Claire_TJ

最新推荐文章于 2023-11-02 10:23:28 发布

阅读量493

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！

学习来源：http://www.w3school.com.cn/jsref/dom_obj_window.asp

Window 对象集合

Window 对象属性

Window 对象方法

我把下表中每个函数都进行了一个测试。代码在文末。

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

Window 对象集合

集合	描述
frames[]	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

集合

描述

frames[]

返回窗口中所有命名的框架。

该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

我的测试结果：每一个按钮点击后就可以出现相应的函数效果。

就像这样:

以下是源代码（有哪里需要我加注释的，欢迎在评论区与我交流）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Window 对象</title>
  <style media="screen" type="text/css">
    body {
      margin: 0;
      padding: 0;
    }

    input {
      margin-left: 50px;
      margin-top: 10px;
      display: block;
      font-size: 20px;
    }

    p {
      margin-left: 50px;
      font-size: 20px;
    }

    iframe {
      display: inline;
      margin-left: 50px;
      margin-top: 20px;
    }
  </style>
  <script type="text/javascript">
    function Frame() {
      var frames = window.frames;
      var i;
      for (i = 0; i < frames.length; i++) {
        frames[i].location = "https://www.baidu.com";
      }
    }

    var flag = new Boolean(true);

    function Closed() {

      if (flag) {
        myWindow = window.open('', '', 'width=200,height=100');
        myWindow.document.write("This is 'myWindow'");
        flag = false;
      }

      if (myWindow.closed)
        document.getElementById('closed').innerHTML = '"myWindow" has been closed';
      else
        document.getElementById('closed').innerHTML = '"myWindow" has not been closed';
    }

    function Innerheight() {
      document.getElementById('innerheight').innerHTML = 'Height:' + window.innerHeight;
    }

    function Innerwidth() {
      document.getElementById('innerwidth').innerHTML = 'Width:' + window.innerWidth;
    }

    function Opener() {
      newWindow = window.open('', 'newWindow', 'width=400,height=300');
      newWindow.document.write('This is a new Window');
      newWindow.focus();
      newWindow.opener.document.getElementById('opener').innerHTML = 'This is the parent winndow';
    }

    function PageXoffset() {
      document.getElementById('pagexoffset').innerHTML = window.pageXOffset;
    }

    function PageYoffset() {
      document.getElementById('pageyoffset').innerHTML = window.pageYOffset;
    }

    function ALert() {
      alert("Hello!" + '\n' + "Welcome to my blog!");
    }

    var int = self.setInterval("Clock()", 50)

    function Clock() {
      var t = new Date();
      document.getElementById('clock').value = t;
    }

    function ClearInterval() {
      window.clearInterval(int);
    }

    var c = 0;
    var settime;

    function timedCount() {
      document.getElementById('cleartimeout').value = c;
      c++;
      settime = setTimeout("timedCount()", 500);
    }

    function stopCount() {
      clearTimeout(settime);
    }

    function Confirm() {
      var r = confirm("press a button!");
      if (r)
        alert("You pressed OK!");
      else
        alert("You persses Cancel!");
    }

    function PRINT() {
      window.print();
    }

    function Prompt() {
      var name = prompt('请输入您的名字', 'Claire');
      if (name != null && name != '')
        alert('Hello ' + name + ',Welcome to my blog!');
    }

    function Scrollby() {
      window.scrollBy(100, -100);
    }

    function ScrollTO() {
      window.scrollTo(50, 50);
    }
  </script>
</head>

<body>
  <input type="button" value="frames属性返回窗口中所有命名的框架。" onclick="Frame()">
  <p>在页面中查找所有框架的数量，然后修改 iframe 元素的 src 属性为 "https://www.baidu.com/":</p>
  <iframe src="https://www.baidu.com" width="400px" height="300px"></iframe>
  <iframe src="https://www.taobao.com" width="400px" height="300px"></iframe>
  <iframe src="http://c.runoob.com" width="400px" height="300px"></iframe>
  <input type="button" value="closed属性可返回一个布尔值声明窗口是否已经关闭。" onclick="Closed()">
  <p id="closed"></p>
  <input type="button" value="innerHeight返回窗口的文档显示区的高度" onclick="Innerheight()">
  <p id="innerheight"></p>
  <input type="button" value="innerWidth返回窗口的文档显示区的宽度。" onclick="Innerwidth()">
  <p id="innerwidth"></p>
  <input type="button" value="opener返回对创建此窗口的窗口的引用。" onclick="Opener()">
  <p id="opener"></p>
  <input type="button" value="pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。" onclick="PageXoffset()">
  <p id="pagexoffset"></p>
  <input type="button" value="pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。" onclick="PageYoffset()">
  <p id="pageyoffset"></p>
  <input type="button" value="alert()显示带有一条指定消息和一个 OK 按钮的警告框。" onclick="ALert()">
  <input type="button" value="clearInterval(id_of_setinterval)取消由 setInterval() 设置的 timeout。" onclick="ClearInterval()">
  <input type="text" id="clock" size="60" />
  <input type="button" value="clearTimeout(id_of_settimeout)取消由 setTimeout() 方法设置的 timeout。" onclick="stopCount()">
  <form>
    <input type="button" value="开始计时！" onClick="timedCount()">
    <input type="text" id="cleartimeout" size="5">
  </form>
  <input type="button" value="confirm()显示一个带有指定消息和 OK 及取消按钮的对话框。" onclick="Confirm()">
  <input type="button" value="print()打印当前窗口的内容。" onclick="PRINT()">
  <input type="button" value="prompt(text,defaultText)显示可提示用户进行输入的对话框。" onclick="Prompt()">
  <input type="button" value="scrollBy(向右滚动的像素数,向下..)把内容滚动指定的像素数。" onclick="Scrollby()">
  <input type="button" value="scrollTo(左上角显示的文档的 x 坐标,y)把内容滚动到指定的坐标" onclick="ScrollTO()">
</body>

</html>

Claire_TJ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Window对象属性方法小结

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！学习来源：http://www.w3school.com.cn/jsref/dom_obj_window.asp目录Window 对象集合Window 对象属性Window...
复制链接

扫一扫