U01_003 案例之窗口操作

1. 案例：按钮开窗口

概念：

• window.open(url, target) 方法可以开启一个新的窗口。
  • p1：开启的新的窗口的url地址，开启空白页面使用 about:blank 。
  • p2：新窗口的开启方式
  • 返回值：新窗口对象
• document.oquerySelector() 方法可以从页面端抓取元素
  • p1：CSS3风格的选择器，这里使用字符串格式。
  • 返回值：从页面端抓取到的元素，如果抓取失败，返回 null 。
• 元素.onclick = () => {} 为元素挂载点击事件，值是一个函数。
• document.write() 在页面上生成HTML代码
  • p1：在页面端生成的HTML代码内容，当然也可以是纯文本。

需求： 通过点击一个按钮，开启一个新的空白窗口，并且在新窗口的页面中写上"abc"

布局：

<button id="openWindowBtn" type="button">开窗</button>
复制代码

脚本：

onload = () => {
    /*先从HTML页面上抓到这个按钮*/
    let openWindowBtn = document.querySelector("#openWindowBtn");
    
    /*给按钮挂载点击事件*/
    openWindowBtn.onclick = () => {
    
        /*使用open方法在新窗口开启一个空白页面*/
        let newPage = open("about:blank", "_blank");
    
        /*在新页面上写上abc*/
        newPage.document.write("abc");
    }
};
复制代码

2. 案例：按钮关窗口

概念：

• 关窗口用的方法就是 window.close() ，关窗关的是网页，一个浏览器可以同时开多个网页，如果浏览器当前只剩下一个网页，则浏览器也将退出。
• 如果关闭按钮设置在父子窗口关系下的子窗口中，则需要使用 window.top.close() 来关闭顶层窗口。

需求： 通过点击一个按钮，关闭当前窗口。

布局：

<button id="closeWindowBtn" type="button">关窗</button>
复制代码

脚本：

onload = () => {
    let closeWindowBtn = document.querySelector("#closeWindowBtn");
    
    /*箭头函数的函数体中，如果只有一行代码，可以省略大括号。*/
    closeWindowBtn.onclick = () => close();
}
复制代码

火狐浏览器会提示"脚本不得关闭非脚本打开的窗口"，则需要调整火狐浏览器的配置：在火狐地址栏输入 `about:config` 找到 `dom.allow_scripts_to_close_windows` 并改为 `true` 。

3. 案例：按钮转窗口

概念： 我们可以使用js来达到超级链接的效果，使用 window.location.href 属性来完成页面的跳转。

需求： 点击按钮跳入百度页面

布局：

<button id="gotoBaiduBtn" type="button">跳入百度</button>
复制代码

脚本：

onload = () => {
    let gotoBaiduBtn = document.querySelector("#gotoBaiduBtn");
    
    /*location=""也可以跳页，但是没有location.href=""专业。*/
    gotoBaiduBtn.onclick = () => location.href = "http://www.baidu.com";
}
复制代码

4. 案例：按钮弹小窗

这次我们使用html内嵌 onclick 的方式来做，只是体验一下，实际开发中，不建议这样使用，html和js的耦合度越低越好。

概念：

• window.alert() ：普通弹窗
  • p1：弹窗的提示字符串。
• window.confrim() ：带取消按钮的弹窗
  • p1：弹窗的提示字符串。
  • 返回值：当用户点击确定，返回 true，点击取消，返回 false 。
• window.prompt() ：带输入框的弹窗
  • p1：弹窗的提示字符串。
  • p2：弹窗中输入框的默认值。
  • 返回值：当用户点击确定，返回用户在输入框中输入的值，点击取消，返回 null 。

布局：

<button type="button" onclick="fnAlert();">alert</button>
<button type="button" onclick="fnConfirm();">confirm</button>
<button type="button" onclick="fnPrompt();">prompt</button>
复制代码

脚本：

function fnAlert(){
    alert("你好");
}

function fnConfirm(){
    let result = confirm("你好");
    console.log(result);
}

function fnPrompt(){
    let result = prompt("请输入阅读密码", "123");
    console.log(result);
}
复制代码