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

집

백엔드 개발

PHP 튜토리얼

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

小云云

Mar 15, 2018 pm 02:12 PM

javascriptjs

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

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

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

　<script> 
　　<!-- 
　　window.open (&#39;page.html&#39;) 
　　--> 
　　</script>

　　
　자바스크립트 코드이므로

사이에 넣어야 합니다.

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

　<script> 
　　<!-- 
　　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 id="Hello">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啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

관련 기사

PHP 실행 : 실제 예제 및 응용 프로그램Apr 14, 2025 am 12:19 AM

PHP는 전자 상거래, 컨텐츠 관리 시스템 및 API 개발에 널리 사용됩니다. 1) 전자 상거래 : 쇼핑 카트 기능 및 지불 처리에 사용됩니다. 2) 컨텐츠 관리 시스템 : 동적 컨텐츠 생성 및 사용자 관리에 사용됩니다. 3) API 개발 : 편안한 API 개발 및 API 보안에 사용됩니다. 성능 최적화 및 모범 사례를 통해 PHP 애플리케이션의 효율성과 유지 보수 성이 향상됩니다.

PHP : 대화식 웹 컨텐츠를 쉽게 만들 수 있습니다Apr 14, 2025 am 12:15 AM

PHP를 사용하면 대화식 웹 컨텐츠를 쉽게 만들 수 있습니다. 1) HTML을 포함하여 컨텐츠를 동적으로 생성하고 사용자 입력 또는 데이터베이스 데이터를 기반으로 실시간으로 표시합니다. 2) 프로세스 양식 제출 및 동적 출력을 생성하여 htmlspecialchars를 사용하여 XSS를 방지합니다. 3) MySQL을 사용하여 사용자 등록 시스템을 작성하고 Password_Hash 및 전처리 명세서를 사용하여 보안을 향상시킵니다. 이러한 기술을 마스터하면 웹 개발의 효율성이 향상됩니다.

PHP 및 Python : 두 가지 인기있는 프로그래밍 언어를 비교합니다Apr 14, 2025 am 12:13 AM

PHP와 Python은 각각 고유 한 장점이 있으며 프로젝트 요구 사항에 따라 선택합니다. 1.PHP는 웹 개발, 특히 웹 사이트의 빠른 개발 및 유지 보수에 적합합니다. 2. Python은 간결한 구문을 가진 데이터 과학, 기계 학습 및 인공 지능에 적합하며 초보자에게 적합합니다.

PHP는 여전히 역동적이며 현대 프로그래밍 분야에서 여전히 중요한 위치를 차지하고 있습니다. 1) PHP의 단순성과 강력한 커뮤니티 지원으로 인해 웹 개발에 널리 사용됩니다. 2) 유연성과 안정성은 웹 양식, 데이터베이스 작업 및 파일 처리를 처리하는 데 탁월합니다. 3) PHP는 지속적으로 발전하고 최적화하며 초보자 및 숙련 된 개발자에게 적합합니다.

PHP의 현재 상태 : 웹 개발 동향을 살펴보십시오Apr 13, 2025 am 12:20 AM

PHP는 현대 웹 개발, 특히 컨텐츠 관리 및 전자 상거래 플랫폼에서 중요합니다. 1) PHP는 Laravel 및 Symfony와 같은 풍부한 생태계와 강력한 프레임 워크 지원을 가지고 있습니다. 2) Opcache 및 Nginx를 통해 성능 최적화를 달성 할 수 있습니다. 3) PHP8.0은 성능을 향상시키기 위해 JIT 컴파일러를 소개합니다. 4) 클라우드 네이티브 애플리케이션은 Docker 및 Kubernetes를 통해 배포되어 유연성과 확장 성을 향상시킵니다.

PHP 대 기타 언어 : 비교Apr 13, 2025 am 12:19 AM

PHP는 특히 빠른 개발 및 동적 컨텐츠를 처리하는 데 웹 개발에 적합하지만 데이터 과학 및 엔터프라이즈 수준의 애플리케이션에는 적합하지 않습니다. Python과 비교할 때 PHP는 웹 개발에 더 많은 장점이 있지만 데이터 과학 분야에서는 Python만큼 좋지 않습니다. Java와 비교할 때 PHP는 엔터프라이즈 레벨 애플리케이션에서 더 나빠지지만 웹 개발에서는 더 유연합니다. JavaScript와 비교할 때 PHP는 백엔드 개발에서 더 간결하지만 프론트 엔드 개발에서는 JavaScript만큼 좋지 않습니다.

PHP vs. Python : 핵심 기능 및 기능Apr 13, 2025 am 12:16 AM

PHP와 Python은 각각 고유 한 장점이 있으며 다양한 시나리오에 적합합니다. 1.PHP는 웹 개발에 적합하며 내장 웹 서버 및 풍부한 기능 라이브러리를 제공합니다. 2. Python은 간결한 구문과 강력한 표준 라이브러리가있는 데이터 과학 및 기계 학습에 적합합니다. 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

PHP : 웹 개발의 핵심 언어Apr 13, 2025 am 12:08 AM

PHP는 서버 측에서 널리 사용되는 스크립팅 언어이며 특히 웹 개발에 적합합니다. 1.PHP는 HTML을 포함하고 HTTP 요청 및 응답을 처리 할 수 있으며 다양한 데이터베이스를 지원할 수 있습니다. 2.PHP는 강력한 커뮤니티 지원 및 오픈 소스 리소스를 통해 동적 웹 컨텐츠, 프로세스 양식 데이터, 액세스 데이터베이스 등을 생성하는 데 사용됩니다. 3. PHP는 해석 된 언어이며, 실행 프로세스에는 어휘 분석, 문법 분석, 편집 및 실행이 포함됩니다. 4. PHP는 사용자 등록 시스템과 같은 고급 응용 프로그램을 위해 MySQL과 결합 할 수 있습니다. 5. PHP를 디버깅 할 때 error_reporting () 및 var_dump ()와 같은 함수를 사용할 수 있습니다. 6. 캐싱 메커니즘을 사용하여 PHP 코드를 최적화하고 데이터베이스 쿼리를 최적화하며 내장 기능을 사용하십시오. 7

See all articles

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7489

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

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

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

SublimeText3 Linux 새 버전

에디트플러스 중국어 크랙 버전

PhpStorm 맥 버전

SublimeText3 Mac 버전

메모장++7.3.1

뜨거운 주제