> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 팝업창 창.열기 사용법 및 매개변수 설명 분석_기본지식

자바스크립트 팝업창 창.열기 사용법 및 매개변수 설명 분석_기본지식

WBOY
풀어 주다: 2016-05-16 18:39:58
원래의
1762명이 탐색했습니다.
window.open 사용법 및 매개변수 설명
1. window.open() 지원 환경:  
 JavaScript1.0 /JScript1.0 /Nav2 /IE3 /Opera3
 
2 , 기본 구문:
 
 window.open(pageURL,name,parameters)
 
 중:
 pageURL은 하위 창 경로입니다
 name은 하위 창 핸들입니다
 parameters는 창 매개변수입니다(각 매개변수는 쉼표로 구분됩니다)
 
3. 매개변수
 
여기서 yes/no도 사용할 수 있습니다. 픽셀 값은 특정 값(픽셀 단위)입니다.
 
 매개변수 | 값 범위| 설명|
 alwaysLowered | 지정된 창은 모든 창 뒤에 숨겨집니다.
> 종속됨 예/아니요 | 상위 창
디렉터리 | Nav2 및 3의 디렉터리 표시줄 표시 여부
높이 | 창 높이
단축키 | 창에 설정됨 메뉴 표시줄 없음
innerHeight | 창에 있는 문서의 픽셀 높이
innerWidth | 창에 있는 문서의 픽셀 너비
위치 표시줄이 표시됩니까? ?
메뉴 표시줄이 표시됩니까?
외부 높이 | 장식 테두리의 픽셀 높이를 설정합니다.
크기 조정 가능 | 창 크기 조정 가능 여부
screenX | 화면 왼쪽 경계선의 픽셀 길이 | 픽셀 길이
창 여부 | 스크롤 막대를 가질 수 있음
제목 표시줄 표시 여부
도구 모음 표시 여부
창의 픽셀 너비 | 🎜> z-look | 예/아니요 | 창이 활성화된 후 다른 창 위에 떠 있는지 여부
그 미스터리를 분석해 보겠습니다.
[1.가장 기본적인 팝업창 코드]
사실 코드는 매우 간단합니다.





[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 이는 자바스크립트 코드이므로 사이에 배치해야 합니다. 는 일부 이전 브라우저에 효과적입니다. 이러한 이전 브라우저에서는 태그의 코드가 텍스트로 표시되지 않습니다. 이 좋은 습관을 기르십시오. window.open('page.html')은 새 창인 page.html의 팝업을 제어하는 ​​데 사용됩니다. page.html
이 기본 창과 동일한 경로에 있지 않은 경우 경로는 다음과 같습니다. 앞에 적으시면 절대경로(http://)와 상대경로(..
/) 모두 가능합니다.
작은따옴표나 큰따옴표를 사용할 수 있지만 혼합하지 마세요.
이 코드는 HTML의 와 사이, 사이에 추가할 수 있습니다. , 특히 페이지 코드가 긴 경우, 페이지가 더 일찍 나타나도록 하려면 최대한 앞쪽에 배치하세요.
【2. 설정 후 팝업창】
팝업창 설정에 대해 알아보겠습니다. 위의 코드에 조금 더 추가하면 됩니다.
이 팝업창의 모양, 크기, 팝업 위치를 페이지의 특정 조건에 맞게 맞춤설정해 보겠습니다.





[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
参数解释:
js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢?
方法一: 浏览器读页面时弹出窗口;
方法二: 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
打开一个窗口
注意:使用的“#”是虚连接。
方法四:用一个按钮调用:

【4、同时弹出2个窗口】
对源代码稍微改动一下:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可
。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。
OK?
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
如下代码加入主窗口区:

加入区:
open即可。
【6、弹出的窗口之定时关闭控制】
下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了?
首先,将如下代码加入page.html文件的区:

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



呵呵,现在更加完美了!
【8、内包含的弹出窗口-一个页面两个窗口】
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
通过下面的例子,你可以在一个页面内完成上面的效果。
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿