html js window_open_close.html

最新推荐文章于 2021-07-02 07:49:42 发布

转载最新推荐文章于 2021-07-02 07:49:42 发布 · 684 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.w3school.com.cn/jsref/met_win_open.asp

js 同时被 2 个专栏收录

133 篇文章

订阅专栏

html

29 篇文章

订阅专栏

本文深入讲解JavaScript中的window.open和window.close方法，演示如何通过这些方法打开和关闭浏览器窗口，包括在新窗口中显示特定网址、关于空白页的内容写入、控制窗口外观以及同时打开多个窗口的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <meta charset="UTF-8">
    <title>window_open_close</title>
</head>
<body>
<form>
    <input type="button" value="打开新页面/窗口" onclick="open_win4()">
    <input type="button" value="关闭新页面/窗口" onclick="closeMyWindow()"/>
</form>

<script>
    // 参考：https://www.w3school.com.cn/jsref/met_win_open.asp
    // 参考：https://www.w3school.com.cn/jsref/met_win_close.asp
    let myWindow, myWindow2;

    function open_win1() {
        /*此函数用于，在（浏览器的）当前窗口，打开新页面。*/
        myWindow = window.open("http://www.w3school.com.cn");
    }

    function open_win2() {
        /*此函数用于，在（浏览器的）新窗口中打开 about:blank 页，
        * 并写入内容。*/
        myWindow = window.open('', '', 'width=200,height=200,top=100,left=200');
        myWindow.document.write("This is 'myWindow'");
        // 此行代码，有没有，效果一样。
        // myWindow.focus();
    }

    function open_win3() {
        /*此函数用于，打开一个新窗口，并控制其外观。*/
        myWindow = window.open(
            "http://www.w3school.com.cn",
            "_blank",
            "fullscreen=yes, channelmode=yes"
        )
    }

    function open_win4() {
        /*此函数用于，通过一次点击打开多个窗口。*/
        myWindow = window.open("http://www.microsoft.com/");
        myWindow2 = window.open("http://www.w3school.com.cn/");
    }

    function closeMyWindow() {
        /*此函数用于，关闭window、myWindow、myWindow2窗口。*/
        myWindow.close();
        if (myWindow2) {
            myWindow2.close();

        }
        // 单独调用close方法，会将绑定到window变量（关键字）上的窗口关闭。
        // 即，会关闭打开当前网页的窗口。
        close();
    }

    /*知识点：
    定义和用法
    open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
    语法
    window.open(URL,name,features,replace)
    参数描述
    URL，一个可选的字符串，声明了要在新窗口中显示的文档的 URL。
    如果省略了这个参数，或者它的值是空字符串，那么新窗口就会显示一个空白文档。
    name，一个可选的字符串，该字符串是一个由逗号分隔的特征列表，
    其中包括数字、字母和下划线，该字符声明了新窗口的名称。
    这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。
    如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。
    在这种情况下，features 将被忽略。
    经测试，此例会不断创建新窗口。

    features，一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。
    如果省略该参数，新窗口将具有所有标准特征。

    replace，一个可选的布尔值。
    规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，
    还是替换浏览历史中的当前条目。支持下面的值：
    true - URL 替换浏览历史中的当前条目。
    false - URL 在浏览历史中创建新的条目。
    提示和注释
    重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，
    这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。

    定义
    close() 方法用于关闭浏览器窗口。
    语法
    window.close();
    说明
    close方法，将关闭有 window 指定的顶层浏览器窗口。
    某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

    只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。
    这阻止了恶意的脚本终止用户的浏览器。
    
    新的顶层浏览器窗口由方法 Window.open() 创建。
    当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。
    新窗口的 opener 属性反过来引用了打开它的那个窗口。

    一般来说，Window 对象的方法都是对浏览器窗口或框架进行某种操作。
    而 alert() 方法、confirm() 方法和 prompt 方法则不同，它们通过简单的对话框与用户进行交互。
    */
</script>
</body>
</html>