집 >웹 프론트엔드 >JS 튜토리얼 >window.open 기능 전체 분석_기본 지식

window.open 기능 전체 분석_기본 지식

WBOY원래의: 2016-05-16 19:25:191202검색

[1. 가장 기본적인 팝업창 코드]
사실 코드는 매우 간단합니다.

자바스크립트 코드이므로
사이에 넣어야 합니다. .
일부 구형 브라우저에서는 작동합니다.

태그의 코드는 텍스트로 표시되지 않습니다. 이 좋은 습관을 기르십시오.
window.open('page.html')은 새 창인 page.html의 팝업을 제어하는 데 사용됩니다. page.html

이 기본 창과 동일한 경로에 있지 않은 경우 경로는 앞에 적어야 하며, 반드시 경로(http://)와 상대경로(..

/) 모두 허용됩니다.

작은따옴표나 큰따옴표를 모두 사용할 수 있지만 혼합하지 마세요. 이 코드는 과
사이 또는
와

ody> 사이에 추가할 수 있습니다. , 특히 페이지에서 코드가 길기 때문에 일찍 실행될수록 페이지가 더 빨리 나타나도록 하려면

앞에 넣으세요.

【2. 설정 후 팝업창】
팝업창 설정에 대해 알아보겠습니다. 위의 코드에 조금 더 추가하면 됩니다.

페이지의 특정

상황에 맞게 팝업창의 모양과 크기, 팝업 위치를 맞춤설정해 보겠습니다.

매개변수 설명:

js 스크립트 끝
[3. 팝업창 제어를 위한 함수] 다음은 완전한 코드입니다.

...모든 페이지 콘텐츠...

여기에는 openwin() 함수가 정의되어 있으며 함수 내용은 창을 여는 것입니다. 호출하기 전에는
아무 소용이 없습니다.
어떻게 부르나요?
방법 1:
브라우저가 페이지를 읽을 때 팝업 창
방법 2:
브라우저가 페이지를 떠날 때 팝업 창 방법 3: 연결하여 호출 :
창 열기
참고: 사용된 "#"은 가상 연결입니다.
방법 4: 버튼을 사용하여 호출:

[4. 동시에 2개의 창 팝업]
소스 코드 약간 변경:

두 개의 팝업창이 서로 가리지 않도록 상단과 좌측을 이용해 팝업 위치를 조절하여 팝업창이 서로 가리지 않도록 해주세요

. 마지막으로 위에서 언급한 네 가지 방법을 사용하여 호출할 수 있습니다.
참고: 두 창(newwindows 및 newwindow2)의 이름은 동일하지 않아야 하며 모두 비어 있어야 합니다.
알았나요?

[5. 메인창에서 1.htm 파일을 열고 작은 창인 page.html을 동시에 띄워주세요]
메인창에 다음 코드가 추가됩니다
지역:

지역 가입:
오픈.

[6. 팝업창 종료 타이밍 제어]
이제 팝업창을 제어할 수 있어 효과가 더 좋아질 것입니다. 팝업 페이지에
코드의 작은 조각을 추가하면(메인 페이지가 아닌 page.html의 HTML에 추가된다는 점에 유의하세요. 그렇지 않으면
...) , 10초 후에 자동으로 종료되는 것이 더 멋지지 않을까요?
먼저 page.html 파일의
영역에 다음 코드를 추가합니다.

그런 다음 를 호출하고, 10초 후에 자동으로 창을 닫는 것입니다.)

【7 .인 팝업창 닫기 버튼 추가]

하하 이제 더 완벽해졌네요!
[8. 팝업창 포함 - 한 페이지에 2개의 창]

위 예시에는 모두 2개의 창이 포함되어 있는데, 하나는 메인 창이고 다른 하나는 작은 팝업 창입니다. . 다음 예시를 통해 위의 효과를 한 페이지에 완성할 수 있습니다.

창 열기

<script>  </script> <script> ipt">标签和</script><script>  </script> <script> js脚本开始； window.open 弹出新窗口的命令； 'page.html' 弹出窗口的文件名； 'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； </script><script>  </script>OpenWindow.document.write() 코드를 보세요. 표준 HTML이 아닌가요? <script>  </script><script>  </script> 형식으로 더 많은 줄을 작성하세요. 라벨이 1개 더 많거나 1개 적으면 오류가 발생하므로 주의하세요. <script> function closeit() { setTimeout("self.close()",10000) //毫秒 } </script><script> function openwin() { OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars="+scroll+",menubar=no"); //写成一行 OpenWindow.document.write("<TITLE>例子") OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") OpenWindow.document.write("<h1>Hello!") OpenWindow.document.write("New window opened!") OpenWindow.document.write("") OpenWindow.document.write("") OpenWindow.document.close() } </script>OpenWindow.document.close()로 끝내는 것을 잊지 마세요.

【9、终极应用--弹出的窗口之Cookie控制】

回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定

没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，

那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(
有解决的办法吗？Yes! Follow me.
我们使用cookie来控制一下就可以了。
首先，将如下代码加入主页面HTML的区：

<script> function openwin(){ window.open("page.html","","width=200,height=200") } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function loadpopup(){ if (get_cookie('popped')==''){ openwin() document.cookie="popped=yes" } } </script>

然后，用（注意不是openwin而是loadpop啊！）

替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进

入该页面，窗口再也不会弹出了。

성명：

이전 기사：정적 페이지는 [원본]_javascript 기술 목록을 표시하기 위해 다양한 방법으로 미리 볼 수도 있습니다.다음 기사：정적 페이지는 [원본]_javascript 기술 목록을 표시하기 위해 다양한 방법으로 미리 볼 수도 있습니다.

window.open 기능 전체 분석_기본 지식

관련 기사