본문 바로가기

개발일지/JavaScript + jquery

[js] frame 화면나누기 복습 및 홈페이지 연결

첫화면이 이렇다 왼쪽은 셀렉트메뉴 오른쪽은 다른 프레임 영역으로 왼쪽에서 선택을 하면 오른쪽에 다른 파일이나 홈페이지가 뜬다.

나의 소개를 누르면 이런 창이 뜬다.

인천시청이나 서울시청을 누르면 오른쪽 프레임에 뜨는 걸 볼 수 있다.

필요한 파일은 총 4개이다. 

 

<right.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>right</title>
 </head>
 <body bgcolor="yellowgreen">
  <h2>메뉴를 선택하세요</h2>
 </body>
</html>

 

<me.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body bgcolor="yellow">
  <h2>안녕하세요 ㅇㅇㅇ입니다.</h2>
 </body>
</html>

 

<menu.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
	function menu(form){
		if(form.url.selectedIndex != 0)
		parent.right.location = form.url.options[form.url.selectedIndex].value;
		}
  </script>
 </head>
 <body>
  <form>
	<select name="url" onChange="menu(this.form)">
		<option selected>메뉴를 선택하세요
			<option value="me.html">나의 소개
			<option value="http://www.incheon.go.kr">인천시청
			<option value="http://www.seoul.go.kr">서울시청
	</select>
  </form>
 </body>
</html>

 

 



1. select문으로 먼저 선택메뉴를 만들어준다. 


<select name="url" onChange="menu(this.form)">

id 대신 name을 쓸 수 있고
onclick과 onChange은 비슷한 메소드다
this.form 이건 위쪽 함수에서 사용하게 될 변수명

 

<option value="me.html">
셀렉트 옵션에서는 하이퍼링크 대신에 value안에 주소를 넣어 줄 수 있다.

 

2. 함수를 만들어준다.
클릭했을 때 다음에 나오는 index 화면에서 나올 수 있도록

function menu(form){ 
여기서 form은 태그가 아니라 변수명으로 써주었는데 상관 없다. 

if(form.url.selectedIndex != 0) 
selectedIndex는 select문에서 나오는 메소드이다.
선택된 인덱스가 0이 아니라면.. 선택을 했다면.. 이런 뜻이다.
0이라면 false 라서 실행을 하지 않는다. 즉 여기서 !=0는 true 라는 뜻

parent.right.location = form.url.options[form.url.selectedIndex].value;
전체 화면 중에서 오른쪽 영역 = 링크(value)를 보낸다.



 

<index.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
	<frameset cols="30%, 70%" border="0">
		<frame src="menu.html">
		<frame src="right.html" name="right">
	</frameset>
</html>

 

프레임을 나눠주는 html 파일