자바스크립트 팝업창 기술 요약 공유-PHP 튜토리얼-php.cn

자바스크립트 팝업창 기술 요약 공유

小云云

풀어 주다： 2023-03-21 14:16:01

원래의

1236명이 탐색했습니다.

이 글에서는 주로 자바스크립트 팝업 창에 대한 기술 요약을 공유합니다. 다음은 팝업 창의 일부 매개변수입니다. 매개변수는 선택사항이며 쉼표로 구분됩니다. 문자열 --객체 테이블을 쉼표로 구분하여 나열합니다. 각 항목에는 고유한 값이 있으며 구분됩니다(예: "fullscreen=yes, toolsbar=yes"). 다음은 지원되는 다양한 기능입니다.

기본값은 yes기본값은 no최소값은 100입니다값은 0기본값은 yes입니다기본값은 yes입니다. titlebar = { yes | no | }width = number top = number

1. 가장 기본적인 팝업창 코드　　

　<SCRIPT LANGUAGE="javascript"> 
　　<!-- 
　　window.open (&#39;page.html&#39;) 
　　--> 
　　</SCRIPT>

로그인 후 복사

　　
　자바스크립트 코드이므로

사이에 넣어야 합니다.

일부 오래된 브라우저에서는 작동합니다. 이러한 오래된 브라우저에서는 태그의 코드가 텍스트로 표시되지 않습니다. 이 좋은 습관을 기르십시오. window.open('page.html')은 새 창인 page.html의 팝업을 제어하는 데 사용됩니다. page.html이 기본 창과 동일한 경로에 없으면 앞에 경로를 명시해야 합니다. 절대 경로(http://) 및 상대 경로(../)가 허용됩니다. 작은따옴표나 큰따옴표를 사용할 수 있지만 혼합하지 마세요. 이 코드 조각은 HTML의 어느 위치에나 추가할 수 있습니다. 코드가 빠를수록 더 빨리 실행됩니다. 특히 페이지 코드가 길어서 페이지가 더 일찍 나타나도록 하려는 경우에는 더욱 그렇습니다. 최대한 앞쪽으로 넣으려고 노력하세요.
　
2. 설정 후 팝업창
　
이제 팝업창 설정에 대해 알아보겠습니다. 위의 코드에 조금 더 추가하면 됩니다. 페이지의 특정 조건에 맞게 이 팝업 창의 모양, 크기 및 팝업 위치를 사용자 정의해 보겠습니다.

　<SCRIPT LANGUAGE="javascript"> 
　　<!-- 
　　window.open (&#39;page.html&#39;, &#39;newwindow&#39;, &#39;height=100, width=400, top=0, left=0, 
toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no&#39;) 
//这句要写成一行
　　--> 
　　</SCRIPT>

로그인 후 복사

　
　매개변수 설명: 　
　 js 스크립트 종료

3. 함수를 사용하여 팝업 창 제어

　다음은 전체 코드입니다. 　

<html> 
　　<head> 
　　<script LANGUAGE="JavaScript"> 
　　<!-- 
　　function openwin() { 
　　window.open ("page.html", "newwindow", "height=100, 
width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, 
status=no") 
//写成一行
　　} 
　　//--> 
　　</script> 
　　</head> 
　　<body onload="openwin()"> 
　　任意的页面内容... 
　　</body> 
　　</html>

로그인 후 복사

　 여기에는 openwin() 함수가 정의되어 있으며 함수 내용은 창을 여는 것입니다. 호출되기 전까지는 아무 소용도 없습니다. 어떻게 부르나요?

방법 1

: 브라우저가 페이지를 읽을 때 창이 나타납니다.
　 방법 2: 브라우저가 페이지를 떠날 때
　 방법 3: 연결을 통해 호출:
　 창 열기 #' 사용된 것은 가상 연결입니다. 　방법 4
: 버튼으로 호출:
　
　 4 동시에 2개의 창 팝업

　 소스로 코드 살짝 수정: 　

<script LANGUAGE="JavaScript"> 
　　<!-- 
　　function openwin() { 
　　window.open ("page.html", "newwindow", "height=100, 
width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
location=n o, status=no")　
//写成一行
 
　　window.open ("page2.html", "newwindow2", "height=100, 
width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
loca tion=no, status=no")　
//写成一行
 
　　} 
　　//--> 
　　</script>

로그인 후 복사

　 두 개의 팝업창이 서로 가리지 않도록 위쪽과 왼쪽을 사용해 팝업 위치를 서로 가리지 않도록 조절하세요. 마지막으로 위에서 언급한 네 가지 방법을 사용하여 호출할 수 있습니다.

Note
: 두 창(newwindows 및 newwindow2)의 이름은 동일하지 않거나 모두 비어 있어야 합니다.

5. 메인 창에서 1.htm 파일을 열면 작은 창인 page.html이 동시에 메인 창 영역에 나타납니다. " onclick="openwin()" >열기.
6. 팝업 창 닫기 제어

　 다음으로 팝업 창에 대한 몇 가지 제어를 수행하면 효과가 더 좋아질 것입니다. 팝업 페이지에 작은 코드 조각을 추가하여(메인 페이지가 아닌 page.html의 HTML에 추가된다는 점 참고) 10초 후에 자동으로 닫히도록 하면 더 멋지지 않을까요?

먼저 page.html 파일 영역에 다음 코드를 추가합니다.

<script language="JavaScript"> 
　　function closeit() 
　　{ 
　　setTimeout("self.close()",10000) 　
//毫秒
 
　　} 
　　</script>

로그인 후 복사

　　然后，再用这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)
7、在弹出窗口中加上一个关闭按钮

<FORM> 
　　<INPUT TYPE=&#39;BUTTON&#39; VALUE=&#39;关闭&#39; onClick=&#39;window.close()&#39;> 
　　</FORM>

로그인 후 복사

　　呵呵，现在更加完美了！
8、内包含的弹出窗口-一个页面两个窗口　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。

　<html> 
　　<head> 
　　<SCRIPT LANGUAGE="JavaScript"> 
　　function openwin() 
　　{ 
　　OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no 
,scrollbars="+scroll+",menubar=no"); 
　　//写成一行 
　　OpenWindow.document.write("<TITLE>例子</TITLE>") 
　　OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
　　OpenWindow.document.write("<h1>Hello!</h1>") 
　　OpenWindow.document.write("New window opened!") 
　　OpenWindow.document.write("</BODY>") 
　　OpenWindow.document.write("</HTML>") 
　　OpenWindow.document.close() 
　　} 
　　</SCRIPT> 
　　</head> 
　　<body> 
　　<a href="#" onclick="openwin()">打开一个窗口</a> 
　　<input type="button" onclick="openwin()" value="打开窗口"> 
　　</body> 
　　</html>

로그인 후 복사

　　看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。
9、终极应用--弹出的窗口之Cookie控制
　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病，比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，我们使用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(&#39;popped&#39;)==&#39;&#39;){ 
　　openwin() 
　　document.cookie="popped=yes" 
　　} 
　　} 
　　</script>

로그인 후 복사

然后，用（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

channelmode = { yes \| no \| 0 }	창에 사다리 모드를 표시할지 여부	directories = { yes \| no \| 창에 래더 모드를 표시할지 여부
	fullscreen = { yes \| no \| 1 \| 0 }	브라우저를 전체 화면 모드로 표시할지 여부
	height = number	창 지정 높이, 단위는 픽셀
	left = number	왼쪽 테두리에서 창까지의 거리를 지정합니다. 단위는 픽셀
	location = { yes \| no \| 1 \| 0 }	창에 주소 표시줄을 표시할지 여부를 지정하세요
	menubar = { yes \| no \| 0 }	메뉴바 표시 여부 지정
	ressible = { yes \| no 1 \| 사용자가 크기를 조정할 수 있는 창의 핸들	기본값은 yes입니다
scrollbars = { yes \| no \| 1 \| 0 }	창에 가로 또는 세로 스크롤 막대를 표시할지 지정하세요	기본값은 yes
status = { yes \| no \| 0}	창에 상태 표시줄을 표시할지 지정합니다
창에 제목 표시줄을 표시할지 여부를 지정합니다. 호출하지 않는 HTML 애플리케이션이나 대화 상자의 경우 기본값은 yes입니다. 앞으로, 뒤로, 중지 등의 버튼이 포함됩니다.	기본값은 yes입니다
창의 너비를 지정합니다. 단위는 픽셀입니다.	최소값은 100
창의 상단을 지정합니다. 위치, 단위는 픽셀입니다.	값은 다음보다 크거나 같아야 합니다. 0

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

자바스크립트 팝업창 기술 요약 공유