windows方法和属性

最新推荐文章于 2025-01-24 09:57:29 发布

原创最新推荐文章于 2025-01-24 09:57:29 发布 · 3k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #javascript #前端

javaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

html

2 篇文章

订阅专栏

文章目录

一、window方法
二、window属性
三、代码

前言：最近在用原生写法编程，因为太久没用原生写代码忘记了，所以记录一下编程过程中遇到的window写法，方便下次查找。持续更新中…
欢迎大家来纠错！！！

一、window方法

方法	定义和用法	参数	举例
window.open	打开一个新的浏览器窗口或查找一个已命名的窗口	(URL,name,specs,replace)	window.open(‘./folding.html’,‘_target’)
window.close	用于关闭浏览器窗口	——	window.close()
window.opener.close	关闭源(父)窗口	——	mime = window.open(‘’, ‘’, ‘width=300,height=300’); mime.opener.close()
window.history.back	加载历史列表中的前一个URL（类似于浏览器的后退按钮）	——	window.history.back()
window.history.forward	加载历史列表中的下一个URL（类似于浏览器的前进按钮）	——	window.history.forward()
window.moveTo	把窗口的左上角移动到一个指定的坐标	(x坐标,y坐标)	mine = window.open(‘’, ‘’, ‘width=300,height=300’); setTimeout(() => {mine.moveTo(100, 100)}, 300);
window.moveBy	相对窗口的当前坐标把它移动的像素	(x坐标,y坐标)	window.moveBy(10,10)
window.resizeTo	把窗口大小调整为指定的宽度和高度	(width,height)	mine = window.open(‘’, ‘’, ‘width=300,height=300’); setTimeout(() => {mine.resizeTo(100, 100)}, 300);
window.print	用于打印当前窗口的内容	——	window.print()
window.getSelection	获取选中的文字及位置		window.getSelection().toString()//选中的文字
window.onbeforeunload	在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出框，提示用户是继续浏览页面还是离开当前页	——	< body οnbefοreunlοad=“return col()”> window.onbeforeunload = function (e) {// 执行}
window.onunload	用户退出或刷新页面时触发(如通过点击一个链接，提交表单，关闭浏览器窗口时)	——	< body οnunlοad=“test()”> window.onunload = function () {// 操作}
window.onload	网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法	——	window.onload = function () {// 执行的操作}
window.location.reload	刷新当前页面	——	window.location.reload()

1、window.open(URL,name,specs,replace)

(1) URL：

2、区分window.moveTo和window.moveBy

window.moveTo：直接移动到某某位置
window.moveBy：在原坐标的基础上，再移动多少像素

方法	原坐标	移动像素	移动后的坐标
window.moveTo	(12,12)	x移动24像素，y移动24像素	(24,24)
window.moveBy	(12,12)	同上	(12+24,12+24)

3、浏览器页面事件基础

(1) 页面加载完毕之后执行onload事件。第一次加载页面时，只执行onload事件
(2) 页面关闭时，先执行onbeforeunload事件，再执行onunload事件
(3) 页面刷新时，先执行onbeforeunload事件，再执行onunload事件，最后onload事件
(4) onbeforeunload和onunload的相同点和区别
相同点：在页面关闭和刷新时调用
不同点：onunload是无法阻止页面的更新和关闭，onbeforeunload可以做到；onbeforeunload在onunload之前执行，可以阻止onunload的执行
在这里插入图片描述

二、window属性

属性	描述	结果举例
window.location.href	返回当前页面完整的url(给它赋值后，会跳转其它页面)	http://localhost:8080/window.html
window.location.pathname	返回当前页面的路径部分	/window.html
window.location.origin	返回当前页面基础的url	http://localhost:8080
document.domain	返回当前页面的域名部分	localhost
window.length	返回当前窗口中ifram的数量	0

三、代码

编写了一段简单的用例，上面所介绍的window方法和属性都应用进去了，可以简单的看下。后续会进行更新…

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window相关写法</title>
    <style>
        div {
            width: fit-content;
            padding: 10px;
            border: 1px solid black;
            margin-bottom: 10px;
            cursor: pointer;
        }

        .onload-style {
            border: none;
            padding: 0;
        }
    </style>
</head>

<body>
    <div onclick="method('openWindow')">打开窗口</div>
    <div onclick="method('closeWindow')">关闭窗口</div>
    <div onclick="method('closeFather')">打开新窗口，关闭父窗口</div>
    <div onclick="method('backBtn')">后退</div>
    <div onclick="method('forwardBtn')">前进</div>
    <div onclick="method('moveToWindow')">to移动窗口</div>
    <div onclick="method('moveByWindow')">by移动窗口</div>
    <div onclick="method('resize')">调整窗口大小</div>
    <div onclick="method('printWindow')">打印当前窗口</div>
    <div onclick="method('site')">光标当前位置</div>
    <div onclick="method('refresh')">刷新页面</div>
    <div onclick="method('address')">获取当前页面地址</div>
</body>

<script>
    // 页面刷新和关闭时执行
    window.onbeforeunload = function (e) {
        console.log('未读取！！！')
    }

    // 页面刷新和关闭时执行
    window.onunload = function () {
        console.log('已读取！！！')
    }

    // 页面加载完后立刻执行
    window.onload = function () {
        addNode('p', '---------我是页面加载完之后执行的---------')
    }

    function method (str) {
        switch (str) {
            case 'openWindow':
                var mime = window.open('', '', 'width=300,height=300');
                break;
            case 'closeWindow':
                window.close();
                break;
            case 'closeFather':
                var mime = window.open('', '', 'width=300,height=300');
                mime.opener.close()
                break;
            case 'backBtn':
                window.history.back();
                break;
            case 'forwardBtn':
                window.history.forward()
                break;
            case 'moveToWindow':
                var mine = window.open('', '', 'width=300,height=300');
                setTimeout(() => {
                    mine.moveTo(100, 100)
                }, 300);
                break;
            case 'moveByWindow':
                var mine = window.open('', '', 'width=300,height=300');
                setTimeout(() => {
                    mine.moveBy(100, 100)
                }, 300);
                break;
            case 'resize':
                var mine = window.open('', '', 'width=300,height=300');
                setTimeout(() => {
                    mine.resizeTo(100, 100)
                }, 300);
                break;
            case 'printWindow':
                window.print()
                break;
            case 'site':
                var selectInfor = window.getSelection();
                var text = '选中文字:' + selectInfor.toString() +
                    ' -----开始位置：' + selectInfor.anchorOffset +
                    ' -----结束位置：' + selectInfor.focusOffset
                addNode('p', text)
                break;
            case 'refresh':
                window.location.reload();
                break;
            case 'address':
                var url = '本页面的地址：' + window.location.href
                addNode('p', url)
        }
    }

    function addNode (labelName, value) {
        var node = document.createElement(labelName);
        var textNode = document.createTextNode(value);
        node.appendChild(textNode);
        document.body.appendChild(node)
    }
</script>

</html>

在这里插入图片描述