U01_003 case of window operations

1. Case: button to open the window

concept:

• window.open(url, target) The method can open a new window.
  • p1: url address of the new window opens, open a blank page use about:blank.
  • p2: open the way to a new window
  • Returns: New window object
• document.oquerySelector() The method can grab elements from the end of the page
  • p1: CSS3 style selector, herein string format.
  • Return Value: from the gripping elements to the end of the page, if the gripping fails, return null.
• 元素.onclick = () => {} Click event for the element mount, value is a function.
• document.write() Generate the HTML code on the page
  • p1: HTML code in content page generated ends, of course, may be plain text.

Demand: by clicking on a button to open a new blank window, and write "abc" page in the new window

layout:

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

script:

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

2. Case: Button Off window

concept:

• The method used is to shut the window window.close(), close the window off of a web page, a browser can open multiple web pages at the same time, if the browser is currently only one page, the browser will also exit.
• If the close button is provided in the child window in a parent-child relationship window, you need window.top.close()to close the top-level window.

Demand: by clicking on a button to close the current window.

layout:

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

script:

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

Firefox will prompt "script may not close the open windows of non-script", you need to adjust the configuration Firefox: In Firefox address bar `about: config` find` dom.allow_scripts_to_close_windows` and instead `true`.

3. Case: transfer window button

Concept: We can use js to achieve the effect of hyperlinks, use the window.location.hrefproperty to complete the jump page.

Requirements: Click the button to jump into the Baidu page

layout:

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

script:

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

4. Case: playing small window button

This time we use html embedded onclickway to do it, just to experience real development, not recommended for such use, the degree of coupling html and js as low as possible.

concept:

• window.alert() : Ordinary pop
  • p1: prompt string of pop.
• window.confrim() : Cancel buttons pop band
  • p1: prompt string of pop.
  • Returns: When the user clicks OK to return true, click Cancel to return false.
• window.prompt() : Tape pop input box
  • p1: prompt string of pop.
  • p2: the input box in the default pop.
  • Returns: When the user clicks OK to return to the user value entered in the input box, click Cancel to return null.

layout:

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

script:

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

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

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