U01_003 caso de operaciones de la ventana

1. Caso: botón para abrir la ventana

concepto:

• window.open(url, target) El método puede abrir una nueva ventana.
  • P1: la dirección URL de la nueva ventana se abre, abrir una página en blanco utilización about:blank.
  • P2: abrir el camino a una nueva ventana
  • Devuelve: Nueva ventana de objeto
• document.oquerySelector() El método puede agarrar elementos del final de la página
  • selector de estilo CSS 3, en el presente documento formato de cadena: p1.
  • Valor de retorno: a partir de los elementos de agarre al final de la página, si falla el agarre, el retorno null.
• 元素.onclick = () => {} Evento Click para el elemento de montaje, el valor es una función.
• document.write() Generar el código HTML de la página
  • P1: código HTML en la página de contenido generado extremos, por supuesto, puede ser texto sin formato.

Demanda: haciendo clic en un botón para abrir una nueva ventana en blanco, y escribir la página "ABC" en la nueva ventana

diseño:

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

guión:

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

2. Caso: Botón ventana Off

concepto:

• El método utilizado es cerrar la ventana window.close(), cerca de la ventana fuera de una página web, un navegador puede abrir varias páginas web al mismo tiempo, si el navegador es actualmente sólo una página, el navegador también salir.
• Si se proporciona el botón de cierre de la ventana secundaria en una ventana relación padre-hijo, lo que necesita window.top.close()para cerrar la ventana de nivel superior.

Exigir: haciendo clic en un botón para cerrar la ventana actual.

diseño:

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

guión:

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

Firefox le pedirá "la escritura no puede cerrar las ventanas abiertas de la no-script", que necesite ajustar la configuración de Firefox: En Firefox barra de direcciones `sobre: ​​config` find` dom.allow_scripts_to_close_windows` y en lugar de` true`.

3. Caso: Botón de traspasos

Concepto: Podemos utilizar JS para lograr el efecto de hipervínculos, utilizar la window.location.hrefpropiedad para completar el salto de página.

Requisitos: Haga clic en el botón para saltar a la página de Baidu

diseño:

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

guión:

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

4. Caso: tocando el botón pequeña ventana

Esta vez utilizamos HTML incrustado onclickmanera de hacerlo, sólo para experimentar un desarrollo real, no se recomienda para dicho uso, el grado de acoplamiento del HTML y JS lo más bajo posible.

concepto:

• window.alert() : Estallido Ordinario
  • P1: cadena del indicador del pop.
• window.confrim() : Cancelar botones de banda de pop
  • P1: cadena del indicador del pop.
  • Devuelve: Cuando el usuario hace clic en Aceptar para volver true, haga clic en Cancelar para volver false.
• window.prompt() : Cuadro de entrada de la cinta pop
  • P1: cadena del indicador del pop.
  • P2: el cuadro de entrada en la ventana emergente por defecto.
  • Devuelve: Cuando el usuario hace clic en OK para volver al valor de usuario introducido en el cuadro de entrada, haga clic en Cancelar para volver null.

diseño:

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

guión:

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

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

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