js_javascript 기술에서 window.open()의 모든 매개변수에 대한 자세한 분석-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

js_javascript 기술에서 window.open()의 모든 매개변수에 대한 자세한 분석

May 16, 2016 pm 05:04 PM

js window.open 매개변수

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

코드 복사 코드

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

자바스크립트 코드이므로 <SCRIPT LANGUAGE="javascript"> . 는 일부 이전 브라우저에 효과적입니다. 이러한 이전 브라우저에서는 태그의 코드가 텍스트로 표시되지 않습니다. 이 좋은 습관을 기르십시오. window.open('page.html')은 새 창인 page.html의 팝업을 제어하는 데 사용됩니다. page.html이 기본 창과 동일한 경로에 없으면 앞에 경로를 명시해야 합니다. 절대 경로(http://) 및 상대 경로(../)가 허용됩니다. 작은따옴표나 큰따옴표를 사용할 수 있지만 혼합하지 마세요. 이 코드는 HTML의 <head>와 </head> 사이 또는 <body></body> 사이에 추가할 수 있습니다. 페이지 코드가 길 경우 페이지를 최대한 빨리 팝업되게 하려면 최대한 앞으로 이동하세요.
　
【2. 설정 후 팝업창】

팝업창 설정에 대해 말씀드리겠습니다. 위의 코드에 조금 더 추가하면 됩니다. 페이지의 특정 조건에 맞게 이 팝업 창의 모양, 크기 및 팝업 위치를 사용자 정의해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

<SCRIPT LANGUAGE="javascript"> ; 
<!-- 
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, 도구 모음=no, menubar=no , scrollbars= no, resizing=no,location=n o, status=no') //이 문장은 한 줄로 작성해야 합니다 
--> 
</SCRIPT> 🎜>
매개변수 설명: 

<SCRIPT LANGUAGE="javascript"> window.open 명령을 사용하여 새 창을 엽니다. .html' 팝업 창 파일 이름 ;
'newwindow' 팝업 창 이름(파일 이름 아님)은 선택 사항이며 빈 ''으로 대체할 수 있습니다.
height=100 window height;
width=400 창 너비;
top=0 화면 상단의 창 픽셀 값;
left=0 화면 왼쪽의 창 픽셀 값.
toolbar=no 도구 모음 표시 여부, yes는 메뉴 표시줄 표시를 의미합니다.
스크롤 막대는 메뉴 막대와 스크롤 막대를 나타냅니다.
ressible=no 창 크기 변경 허용 여부, yes 허용
location=no 주소 표시줄 표시 여부, yes 허용
status=no 상태 표시줄에 정보 표시 여부; (일반적으로 파일이 열려 있음) ), 허용됩니다.
</SCRIPT> js 스크립트 끝

[3. 팝업 창 제어]

다음은 완전한 코드입니다.

코드 복사

코드는 다음과 같습니다.<html> head> <script LANGUAGE="JavaScript">

<!--

function openwin() {
window.open ("page.html", "newwindow", "height =100, 너비=400, 툴바 =no, 메뉴바=no, 스크롤바=no, 크기 조정 가능=no, 위치=no, 상태=no") //한 줄에 쓰기
}
//--> ;
< ;/script>
</head>
<body onload="openwin()">
모든 페이지 콘텐츠...
</body> 🎜>< /html>

여기에는 openwin() 함수가 정의되어 있으며 함수 내용은 창을 여는 것입니다. 호출되기 전까지는 아무 소용도 없습니다. 어떻게 부르나요?
방법 1: <body onload="openwin()"> 브라우저가 페이지를 읽을 때 창이 나타납니다.
방법 2: <body onunload="openwin()"> 브라우저가 페이지를 떠날 때 창
방법 3: 연결을 통해 호출:
<a href="#" onclick="openwin()">창 열기</a> 참고: "#"은 가상 연결을 사용합니다.
방법 4: 버튼으로 호출:
<input type="button" onclick="openwin()" value="Open window">

【4. 동시에 2개의 창이 나타납니다]
소스 코드를 약간 변경합니다:

코드 복사 코드는 다음과 같습니다:

<script LANGUAGE="JavaScript"> 
<!-- 
function openwin() { 
window.open ( "page.html", "newwindow ", "높이=100, 너비=100, 상단=0, 왼쪽=0, 도구 모음=no, 메뉴바=no, 스크롤바=no, 크기 조정 가능=no, 위치=n o, 상태=no ")//한 줄로 쓰기 
window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100, toolsbar=no, menubar=no , 스크롤바=no, 크기 조정 가능=no, 위치=no, 상태=no")//한 줄로 작성 
} 
//--> 
</script> 
 
 

두 개의 팝업창을 피하려면 가리려면 위쪽과 왼쪽을 사용하여 팝업 위치를 서로 가리지 않도록 조절하세요. 마지막으로 위에서 언급한 네 가지 방법을 사용하여 호출할 수 있습니다.
참고: 두 창(newwindows 및 newwindow2)의 이름은 동일하지 않아야 하며 모두 비어 있어야 합니다.

[5. 메인창에서 1.htm 파일을 열면 작은창인 page.html이 동시에 뜹니다] 메인 창의 <head> 영역에 다음 코드를 추가합니다.

코드 복사 코드

<script 언어="javascript"> 
<!-- 
function openwin() { 
window.open("page.html ","","width=200,height =200") 
} 
//--> 
</script> 

<body>에 참여 ; 영역:
<a href=" 1.htm" onclick="openwin()">열기</a>.

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

코드 복사 코드는 다음과 같습니다.

<script 언어="JavaScript"> 
function closeit() 
{ 
setTimeout("self.close()" ,10000) //밀리초 
 } 
</script> 

그런 다음 <body onload="closeit()"> page.html에서 그게 다입니다. (이 문장을 꼭 작성해주세요! 이 문장의 기능은 창을 닫는 코드를 호출하는 것이며, 10초 후에 창이 자동으로 닫힙니다.)

【7. 팝업창에 닫기 버튼 추가】

<FORM>

<INPUT TYPE='BUTTON' VALUE='닫기' onClick='window.close()'>

[8. 팝업창 포함 - 한 페이지에 2개의 창]

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

코드 복사 코드는 다음과 같습니다.

<html>  
<머리>  
<SCRIPT LANGUAGE="자바스크립트">  
함수 openwin()  
{  
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars=" 스크롤 ",menubar=no" );  
//写成一行  
OpenWindow.document.write("<TITLE>例子</TITLE>")  
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")  
OpenWindow.document.write("<h1>안녕하세요!</h1>")  
OpenWindow.document.write("새 창이 열렸습니다!")  
OpenWindow.document.write("< /BODY>")  
OpenWindow.document.write("</HTML>")  
OpenWindow.document.close()  
}  
</SCRIPT>  
</head>  
<본문>  
<a href="#" onclick="openwin()">打开一个窗口</a>  
<input type="button" onclick="openwin()" value="打开窗口">  
</body>  
</html>  

看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。

【9、终极应用--弹出的窗应のCookie控조제】

回想一下,상면적弹你将酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放回你将需要频繁经过的页면리(例如首页) ，那么每次刷new这个页면，窗口city会弹书一次，是不是不常烦人?:-(
有解决的办法吗? 네! ;-) 팔로우하세요.以了。

首先，将如下代码加入主页faceHTML적<HEAD>区：

复主代码代码如下:

<스크립트>  
function openwin(){  
window.open("page.html","","width=200,height=200")  
}  
function get_cookie(이름) {  
 var search = 이름 "="  
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;  
} 　 
함수 loadpopup(){  
if (get_cookie('popped')==''){  
openwin()  
document.cookie="popped=yes"  
 }  
}  
</script> 