window.open 기능 전체 분석_기본 지식-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:25 PM

[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啊！）

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

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript로 문자열 문자를 교체하십시오Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

자신의 Ajax 웹 응용 프로그램을 구축하십시오Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

jQuery 매트릭스 효과Mar 10, 2025 am 12:52 AM

매트릭스 영화 효과를 페이지에 가져 오십시오! 이것은 유명한 영화 "The Matrix"를 기반으로 한 멋진 jQuery 플러그인입니다. 플러그인은 영화에서 클래식 그린 캐릭터 효과를 시뮬레이션하고 사진을 선택하면 플러그인이 숫자로 채워진 매트릭스 스타일 사진으로 변환합니다. 와서 시도해보세요. 매우 흥미 롭습니다! 작동 방식 플러그인은 이미지를 캔버스에로드하고 픽셀 및 색상 값을 읽습니다. data = ctx.getImageData (x, y, settings.grainsize, settings.grainsize) .data 플러그인은 그림의 직사각형 영역을 영리하게 읽고 jQuery를 사용하여 각 영역의 평균 색상을 계산합니다. 그런 다음 사용하십시오

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

간단한 jQuery 슬라이더를 만드는 방법Mar 11, 2025 am 12:19 AM

이 기사에서는 jQuery 라이브러리를 사용하여 간단한 사진 회전 목마를 만들도록 안내합니다. jQuery를 기반으로 구축 된 BXSLIDER 라이브러리를 사용하고 회전 목마를 설정하기위한 많은 구성 옵션을 제공합니다. 요즘 그림 회전 목마는 웹 사이트에서 필수 기능이되었습니다. 한 사진은 천 단어보다 낫습니다! 그림 회전 목마를 사용하기로 결정한 후 다음 질문은 그것을 만드는 방법입니다. 먼저 고품질 고해상도 사진을 수집해야합니다. 다음으로 HTML과 일부 JavaScript 코드를 사용하여 사진 회전 목마를 만들어야합니다. 웹에는 다양한 방식으로 회전 목마를 만드는 데 도움이되는 라이브러리가 많이 있습니다. 오픈 소스 BXSLIDER 라이브러리를 사용할 것입니다. BXSLIDER 라이브러리는 반응 형 디자인을 지원 하므로이 라이브러리로 제작 된 회전 목마는