윈도우 작업의 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();
}
复制代码

에서 파이어 폭스 주소에 대한 줄`: 대신 config` find` 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);
}
复制代码