In JavaScript, window means "window" and is a built-in host object that represents the browser window. All browsers support this object. All JavaScript global objects, functions, and variables will automatically become members of the window object.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
In JavaScript, window means "window" and is a built-in host object.
The window object is the core of all objects in the BOM. In addition to being the parent object of all objects in the BOM, it also contains some window control functions.
The host object is the object provided by the environment that executes the JS script, and is the object provided by the browser. All BOM and DOM are host objects.
Window object
All browsers support the window object. It represents the browser window.
All JavaScript global objects, functions, and variables automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document of HTML DOM is also one of the attributes of the window object:
window.document.getElementById("header");Same as this:
document.getElementById("header");1. Global window object
Any global function or variable in JavaScript is a property of window.
<script type="text/javascript">
var name="撼地神牛";
document.write(window.name);
</script>2. Window and self objects
The self object is exactly the same as the window object. Self is usually used to confirm that it is in the current form.
<script type="text/javascript">
document.write(window == self); //必须相等，永远都相等
document.write(window.Top == window.self); //判断当前框架是否是主框架
</script>Window, self, window.self are equivalent.
3. Sub-objects of window
The main objects of window mainly include the following:
JavaScript document object
JavaScript frames object
JavaScript history object
JavaScript location object
JavaScript navigator object
JavaScript screen object
4. Window function index (only valid for IE)
Form control Function:
JavaScript moveBy() Function: Move the form x pixels horizontally and y pixels vertically from the current position. If x is a negative number, it will move the form to the left. A negative y will move the form upward.
JavaScript moveTo() function: Move the upper left corner of the form to the (x, y) point relative to the upper left corner of the screen. When a negative number is used as a parameter, the form will be moved out of the screen. visible area.
JavaScript resizeBy() function: Relative to the current size of the form, adjust the width by w pixels and the height by h pixels. If the parameter is negative, the form will be reduced, otherwise it will be enlarged.
JavaScript resizeTo() function: Adjust the width of the form to w pixels and the height to h pixels.
<body>
<input type="button" id="btn1" value="先设置窗体固定大小！" onclick="window.resizeTo(500,500);" />
<input type="button" id="btn2" value="再缩小10像素！" onclick="window.resizeBy(-10,-10);" />
<input type="button" id="btn2" value="上！" onclick="window.moveBy(0,-5);" />
<input type="button" id="btn2" value="下！" onclick="window.moveBy(0, 5);" />
<input type="button" id="btn2" value="左！" onclick="window.moveBy(-5, 0);" />
<input type="button" id="btn2" value="右！" onclick="window.moveBy(5, 0);" />
<input type="button" id="btn2" value="距离左上角左边100像素，顶部200像素" onclick="window.moveTo(100, 200);" />
</body>Form scroll axis control function:
JavaScript scrollTo() function: If there is a scroll bar in the form, it will scroll horizontally The bar is moved to a position x pixels relative to the width of the form, and the vertical scroll bar is moved to a position y pixels relative to the height of the form.
JavaScript scrollBy() function: If there is a scroll bar, move the horizontal scroll bar to a position of x pixels relative to the current horizontal scroll bar (that is, move x pixels to the left), Move the vertical scroll bar to a position that is y pixels relative to the height of the current vertical scroll bar (that is, move y pixels downward).
Note the difference, one is relative to the current window, and the other is relative to the current position of the scroll bar.
<div style="height:150%; width:150%; background-color:#ddd">
<input type="button" id="btn1" value="移动滚动条！" onclick="window.scrollTo(100,100);" /> //相当于设置绝对位置
<input type="button" id="btn1" value="移动滚动条！" onclick="window.scrollBy(100,100);" /> //相当于累加
</div>Form focus control function:
JavaScript focus() function: Make the form or space gain focus
JavaScript blur() function: Make the form or control lose focus
<div>
<input type="button" value="获得焦点" onclick="document.getElementById('testInput').focus()" />
<input type="button" value="失去焦点" onclick="document.getElementById('testInput').blur()" />
<input type="text" value="text" id="testInput" onblur="alert('我已失去焦点')" />
</div>New form function:
window.open(url, name, features, replace);
Open function parameter description:
Open method example:
<a href="2.html" target="2">在新窗口打开连接</a> <a href="#" onclick="window.open('http://www.google.com','2');">在已建立连接的页面打开新地址</a>
First use a normal HTML link to open a page (target named dreamdu), and then use the open function to open another page. The browser first needs to find whether There is a form named dreamdu. If so, load the open address in this form.
Set open
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')
Pop-up window method:
方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口； 方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
Description of the third parameter features of the open function:
| Parameter name | Type | Description |
|---|---|---|
| height | Number | Set the height of the form, which cannot be less than 100 |
| left | Number | Describe the left coordinate of the created form, which cannot be negative Value |
| location | Boolean | Whether the form displays the address bar, the default value is no |
| Boolean | Whether the form allows resizing by dragging the edges, the default value is no | |
| Boolean | Whether dragging is allowed when the interior of the form exceeds the visible range of the window. The default value is no | |
| Boolean | Whether the form displays the toolbar, the default value is no | |
| Number | Describes the upper coordinate of the created form, which cannot be a negative value | |
| Boolean | Whether the form displays the status bar, the default value is no | |
| Number | The width of the created form cannot be less than 100 |
