자바스크립트 에세이 학습 팁(창과 프레임 활용)_자바스크립트 팁

JavaScript를 사용하면 HTML 텍스트, 양식 개체 및 프레임을 나타내는 창을 만들고 열 수 있습니다. 창 개체는 JavaScript 클라이언트 계층 구조의 최상위 개체이며 양식 요소와 모든 JavaScript 코드가 문서에 있습니다. 창에 로드됩니다.

창 열기 및 닫기
사용자가 Navigator를 시작하면 창이 자동으로 생성될 수도 있습니다. 파일 메뉴에서 네비게이터 새 웹 브라우저를 사용하면 창을 열 수 있고, 네비게이터의 파일 메뉴에서 닫기 또는 종료를 사용하여 창을 열거나 닫을 수도 있습니다. 🎜>창 열기

open 메소드를 사용하여 창을 만듭니다. 다음 명령문은 msgWindow라는 창을 만들고 창에 sesame.html 파일의 내용을 표시합니다. msgWindow=window .open(" sesame.html")

다음 명령문은 Netscape의 홈 페이지를 표시하기 위해 homeWindow라는 창을 생성할 수 있습니다.

homeWindow=window.open("http://www .netscape .com")

창은 두 개의 이름을 가질 수 있습니다. 다음 명령문은 두 개의 이름을 가진 창을 만듭니다. 첫 번째 이름은 msgWindow이며 창의 속성, 메서드 및 포함 관계를 참조하는 데 사용됩니다. 두 번째 이름인 displayWindow는 창을 양식 제출 또는 하이퍼텍스트 링크 개체로 참조할 때 사용됩니다.

창을 만들 때 창 이름을 지정할 필요는 없습니다. 창 이 창을 참조하려면 이 창에 이름이 있어야 합니다. 창 이름 사용에 대한 자세한 내용은 창 및 프레임 관련 정보를 참조하세요.

창을 열 때 창 속성을 지정할 수 있습니다. 창의 높이와 너비, 도구 모음, 위치 필드 또는 스크롤 막대 등이 포함되어 있는지 여부. 다음 명령문은 도구 모음은 없지만 스크롤 막대는 있는 창을 만듭니다.

msgWindow=window.open
("sesame.html","displayWindow ","toolbar=no,scrollbars=yes")

창 속성에 대한 자세한 내용은 OPEN 메서드를 참조하세요

닫기 window
프로그램에서 close 메소드를 사용하여 창을 닫을 수 있습니다. 전체 상위 창을 닫지 않고 하나의 프레임만 닫을 수는 없습니다.

다음 명령문은 현재 창을 닫을 수 있습니다. 🎜>
window.close()
self.close( )
//이 문은 이벤트 핸들러에서 사용할 수 없습니다.
close()

다음 문은 이름이 지정된 창을 닫습니다. msgWindow:

msgWindow.close()



------------ ---------------- ---------------------------------- -----------




프레임 사용

frame是一种特殊的窗口,它可以在一个窗口显示多个独立滚动的frame.每个frame又有各自不同的URL. 各frame可以指向不同的URL,也可以作为其它URL目标,但必须在同一个窗口内. 一系列的frame 组成页(page).

下图是一个含有三个frame的窗口

            This frame is                     This frame is
named listFrame                   named contentFrame

|                                   |
-----------------v-----------------------------------v------------
| Music Club            |      Toshiko Akiyoshi                  |
| Artists               |         Interlude                      |

| Jazz                  |      The Beatles                       |
| - T. Akiyoshi         |         Please Please Me               |
| _ J. Coltrame         |                                        |
| - M. Davis            |      Betty carter                      |
| - D. Gordon           |         Ray Charles and Betty Carter   |

| Soul                  |      Jimmy Cliff                       |
| - B. Carter           |         The Harder They Come           |
| _ R. Charles          |                                        |
|     ...               |         ...                            |
------------------------------------------------------------------
| Alphabetical By category Musician Descriptions                 |
-----------------^------------------------------------------------

|
This frame is named
navigateFrame
创建一个frame
在HTML文档中使用

标记就可以创建一个frame. 标记在HTML文档中的唯一作用就是定义组成页的各个frame的布局(layout).

例1 下述语名定义了上图所示的一组frame


　
　　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　
　 


下图给出了这些frame的层次结构,虽然有两个frame是在另一个frameset中定义的,但这三个frame有同一个父亲, 这是因为frame的父亲是它的父窗口,而窗口是由frame而不是frameset确定的.

top

+--listFrame (category.html)

+--contentFrame(titles.html)

+--navigateFrame(navigate.html)
你也可以数组frames引用上述的frame(有关数组frames的信息参见frame对象):
listframe 用 top.frame[0]表示 
contentframe 用 top.frame[1]表示 
navigateframe 用 top.frame[2]表示 
例2 可以用另一个办法创建上述窗口: 最前面的两个frame与navigateFrame各有不同的父辈,顶层的frameset定义如下:


　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 

文件muskel3.html包含了上述frame的骨架,并定义了下述frameset.


　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32>  

下图说明了这几个frame的层次关系upperFrame和navigateFrame共享一个父辈:最顶的window. 而listFrame和contentFrame共享一个父辈:upperFrame.

top

|                        +--listFrame
|                        | (category.html)
+---upperFrame-----------|
|  (muske13.html)        |
|                        +--contentFrame
|                           (titles.html)

+--navigateFrame
(navigate.html)
可以用下面的办法引用这些frame(关于frame数组的信息参见frame对象).
upperFrame 用 top.frame[0]表示 
navigateFrame 用 top.frame[1]表示 
listFrame 用 upperFrame.frames[0] 或top.frames[0].frames[0]表示 
contentFrame 用upperFrame.frames[1] 或top.frames[0].frames[1]表示 
更新frame(updating frames)
只要你说明了frame层次结构,你可以用location属性来设置URL, 以更新frame的内容. 

例如,在使用上节例2中frameset时,若希望用户能够关闭含有字母序或分类序的画家列表的frame(名为listframe),且只想看到按作曲家排序的作品标题(在contentFrame中), 则可以向navigateFrame 中加入如下按钮.

onClick="top.frames[0].location='artists.html'">

当用户按动此按钮时,文件artist.html被加载到名为upperFrame的frame中,而listFrame和contentFrame被关闭,且不再存在.

引用frame和在frame之间浏览(navigate)
因为frame是一种窗口,所以你可以与使用窗口类似的办法引用frame和在frame 之间浏览.

frame的例子
在上一节中, 若frameset被设计为一个音乐俱乐部的可用的标题,则这些frame及其HTML文件包括下述的内容:

category.html 位于listFrame中, 放有按分类排序的作曲家列表 
titles.html 位于contentFrame中, 放有按字母序列里各作曲家姓名及该作曲家的作品标题. 
navigate.html 位于navigateFrame中, 放有超文本链, 使用户选择怎样在listFrame中显示作曲家:以字母序或分类序.这个文件还定义了一个超文本链, 使用户可以显示每个作曲家的简介. 
附加文件alphabet.html 放有按字母排序的作曲家,当用户想显示字母序列表时,按动此链,这个文件中就显示在listFrame中. 
Category.html 파일(카테고리별로 정렬)에는 다음과 유사한 코드가 포함되어 있습니다.

Music Club Artists

Jazz

아키요시 도시코

존 콜트레인

마일스 데이비스

덱스터 고든

소울

베티 케이터

레이 찰스
.. .

파일 Alphabet.html(알파벳순으로 정렬)에는 다음과 유사한 코드가 포함되어 있습니다.

Music Club Artists

Toshiko Akiyoshi

비틀즈

베티 카터

레이 찰스
.. . ...

파일 Navigate.html(화면 하단의 탐색 링크)에는 다음과 유사한 코드가 포함되어 있습니다. 참고: 사용자가 이를 클릭하면 Artists.html의 대상은 "_parent"입니다. 링크, 상단 창은 NavigateFrame의 상위 창이므로 전체 창을 재작성했습니다.

    카테고리별

   
Musician Descriptopns

파일 titles.html(기본 파일, 프레임에 표시됨) 오른쪽) 포함 코드는 대략 다음과 같습니다.



Toshiko Akiyoshi

Interlude

비틀즈

Please Please Me

베티 카터

Ray Charles와 Betty Carter

...
프레임 생성 구문에 대한 자세한 내용은 프레임 개체를 참조하세요.

------------- ----------- ------------- ---



참조 창 및 프레임
어떤 이름인지 창을 참조하는 데 사용하는 방법은 창 속성, 메소드 및 이벤트 핸들러를 참조할지 여부에 따라 다르지만 여전히 창을 양식 제출 또는 하이퍼텍스트 링크용 개체로 사용하려고 합니다. 개체는 JavaScript 클라이언트 계층의 최상위 수준에 있습니다. 창은 창에 포함된 개체 간의 관계에 대한 설명입니다.

창의 속성, 메서드 및 이벤트 핸들러를 참조하세요
다음 방법 중 하나를 사용하여 현재 창이나 다른 창의 속성, 메서드 및 이벤트 처리기를 참조할 수 있습니다.

self 또는 window: self와 window는 같은 의미를 가지며 둘 다 현재 창을 참조합니다. 현재 창을 참조하기 위해 둘 중 하나를 선택할 수 있습니다. 예를 들어 현재 창을 닫으려면 window.close() 또는 self.close()를 호출하세요.
top 또는 parent: top과 parent 모두 이름을 바꾸는 데 사용됩니다. 창 상단은 상단 네비게이터 창을 참조하고 부모는 프레임세트를 포함하는 창을 참조합니다. 예를 들어 parent.frame2.document.bgColor="teal" 문은 프레임2라는 이름의 프레임 이름을 변경합니다. teal.frame2는 현재 프레임셋의 프레임입니다.
창 변수 이름: 창 변수 이름은 창을 열 때 지정하는 변수입니다. 예를 들어 msgWindow.close는 msgWindow라는 창을 닫습니다. 이벤트를 사용하고 싶습니다. 핸들러에서 창을 열거나 닫으려면 window.open() 또는 window.close()를 사용해야 합니다. JavaScript의 정적 객체 범위 문제로 인해 open() 및 close()는 사용할 수 없습니다. , close는 지정하지 않고 호출됩니다. 객체 이름은 document.close()와 같습니다.
창 이름을 생략합니다. 항상 현재 창을 가정하므로 창의 메서드를 호출하고 해당 속성을 사용할 때 창 이름을 생략할 수 있습니다. 예를 들어 close()는 현재 창을 닫습니다.
창 메서드에 대한 자세한 내용은 창 개체를 참조하세요.

예제 1 현재 창에서 musicform이라는 형식을 참조합니다. 확인란을 선택하면 이 명령문은 경고를 표시합니다

if (self.document.musicForm.checkbox1.checked)
Alert('The checkbox on the misicForm is selected')

예제 2는 다른 창을 참조합니다. 다음 문은 checkboxWin 창에 있는 musicform이라는 양식을 인용합니다. 이 문은 확인란 선택 여부를 결정하고, 확인란을 실행하고, 선택 개체의 옵션이 선택되었는지 확인합니다. , SELECT 개체의 옵션 선택

/ /체크박스 선택 여부 확인
if (checkboxWin.document.musicForm.checkbox2.checked) {
Alert('misicForm의 체크박스 checkboxWin이 선택되어 있습니다.')}

//체크박스 체크 실행
checkboxWin.document.musicForm.checkbox2.checked=true

//선택 개체의 옵션 선택 여부를 확인
if ( checkboxWin .document.musicForm.musicTypes.options[1].selected)
alert('옵션 1이 선택되었습니다!')

//SELECT 개체
checkboxWin.document의 옵션을 선택합니다. musicForm.musicTypes.selectedIndex=1

예제 3은 다른 창에 있는 프레임을 참조합니다. 다음 명령문은 창 window2에 있는 프레임 2를 참조합니다. 이 명령문은 프레임2의 배경색을 보라색으로 변경합니다. 프레임2

태그에 지정해야 합니다. 은 프레임세트를 생성할 수 있습니다.

window2.frame2.document.bgColor="violet"

양식 제출 또는 하이퍼텍스트 링크에서 참조하세요. 창
창을 양식 제출 또는 하이퍼텍스트 링크의 개체로 사용하는 경우(

또는 태그의 TARGET 속성으로) 창 변수가 아닌 창 이름을 사용합니다. link 로드된 창 또는 양식의 경우 서버 응답을 표시하는 창입니다.

예제 1 다음 예에서는 두 번째 창에 대한 하이퍼텍스트 링크를 만듭니다. : 버튼, 이 버튼 창은 window2라는 이름의 창을 열 수 있습니다. doc2.html 파일을 최근에 열린 창에 로드합니다. 또 다른 버튼은 창을 닫습니다. onClick="msgWindow=window.open('','resizing=no,width=200,height=200')"

onClick="msgWindow.close()">

두 번째 창의 앵커 예 2 두 번째 창에 앵커를 만듭니다. window2에 있는 doc2.html 파일의 앵커 이름을 표시하는 하이퍼텍스트 링크

Numbers


예 3의 프레임 이름. 다음 예를 들어, 프레임 내의 앵커에 대한 하이퍼텍스트 링크가 생성됩니다. 이 링크는 contFrame의 abs_method라는 파일에 표시되며 프레임 이름은 NAME 속성 정의
abs

예제 4 일반 프레임의 이름 다음 예에서는 파일의 내용을 포함합니다. 현재 프레임세트의 상위 창에 표시된 아티스트.html 파일은 이 링크 개체가 프레임세트의 프레임에 나타납니다. 사용자가 이 링크를 클릭하면 프레임세트의 모든 프레임이 사라지고 아티스트.ftml의 내용이 Within으로 로드됩니다.


뮤지션 설명


---------- - ------------------------------------------------- - -----------------


창 간 탐색(창 간 탐색)
동시에 여러 개의 네비게이터 창을 열 수 있습니다. 사용자는 창을 클릭하여 이 창 사이를 탐색할 수 있습니다. 또는 이 창을 하이퍼텍스트 링크의 대상으로 지정하여 프로그래밍 방식으로 지정할 수 있습니다. 두 번째 창에 있는 개체의 값은 있지만 두 번째 창은 활성화할 수 없습니다.

활성 창은 창에 포커스가 있으면 On으로 설정됩니다. 예를 들어, 이 창의 제목 표시줄은 사용 중인 플랫폼에 따라 색상이 변경될 수 있습니다.

예 1 다른 창의 개체에 포커스를 지정합니다. 다음 명령문은 창 checkboxWin의 텍스트 개체 city에 포커스를 할당할 수 있습니다. city가 포커스를 얻고 활성 창이 됩니다. 이 예에는 checkboxWin을 생성하는 명령문도 포함되어 있습니다. open("doc2.html")
...
checkboxWin.document.musicForm.city.focus()

예 2 하이퍼텍스트 링크를 사용하여 다른 A 창에 포커스를 할당합니다. 문장은 하이퍼텍스트 링크의 대상으로 window2를 지정합니다. 사용자가 이 링크를 클릭하면 window2로 전환됩니다. window2가 없으면


window2에 파일을 로드합니다. >