Scenario: 메인에 Index.jsp 에서 2개의 프레임이 있다. 왼쪽은 로그인을 할 수 있는 iframe 이고 오른쪽은 로그인 결과를 나타내주는 iframe이다.

왼쪽창에서 로그인 검증값으로 넘어간뒤 로그인이 완료되면 right의 iframe 을 동적으로  반응 시켜주어야 했다. 

즉 왼쪽 iframe 스크립트 코드에서 오른쪽으로 접근하는 부분에서 애를 많이 먹었는데 성공 할 수있었다.


Solutions:

(구문해석)

$('#right', window.parent.document).contents().find('.login').show();    //가장 애먹은 부분이었다.

위와 왼쪽 프레임에서 오른쪽 프레임으로 접근하였다.

 $('#right', window.parent.document) 이것은 부모프레임에서 #right라는 id를 가진 프레임에 접근하는 것이다.

contents().find('.login').show(); 그뒤에 그 프레임내 컨텐츠에서 login class를 가진 요소에 접근해 show() 시켜준다.


<index.jsp>

HTML 5 0.54 KB
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.    pageEncoding="UTF-8"%>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7.  
  8. </head>
  9. <body>
  10. <h1 id=hi>여기표시 접근가능?</h1>
  11. <table width="100%" border="1">
  12. <tr><td id='frame'>
  13. <iframe src="left.jsp" width="450" height="560"></iframe>
  14. <iframe id="right" src="right.jsp" width="450" height="560"></iframe>
  15. </td>
  16. </tr>
  17. </table>
  18.  
  19. <script type="text/javascript">
  20.    
  21. </script>
  22. </body>
  23. </html>



<left.jsp>

HTML 5 1.65 KB
  1. <%@page import="java.util.Date"%>
  2. <%@page import="java.text.SimpleDateFormat"%>
  3. <%@ page language="java" contentType="text/html; charset=UTF-8"
  4.    pageEncoding="UTF-8"%>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8. <%
  9.     Date time = new Date();
  10.     SimpleDateFormat formatter = new SimpleDateFormat("yyy-MM-dd HH:mm:ss");
  11.  
  12. %>
  13. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  15.  
  16.  
  17. </head>
  18. <body>
  19.     <h1>left.jsp</h1><br>
  20.     <form action="LoginResult.jsp">
  21.         <% if(session.getAttribute("id") == null){%>
  22.        
  23.             아이디:  <input type="text" name="id"><br>
  24.             비밀번호: <input type="text" name="pw"><br>
  25.             <input type="submit" value="로그인">
  26.        
  27.         <script type="text/javascript">
  28.             $(function(){
  29.                 $('#right', window.parent.document).contents().find('.login').hide();
  30.                 $('#right', window.parent.document).contents().find('.logout').show();
  31.             })
  32.         </script>
  33.        
  34.        
  35.         <%} else { %>
  36.         <h3>jsp 님 로그인중</h3><br>
  37.         <input type="submit" value="LogOut">
  38.             <hr style="border:solid 2px red;">
  39.             접속시간:<% time.setTime(session.getCreationTime()); %><%=formatter.format(time) %><br>
  40.             최근 접근 시간시간:<% time.setTime(session.getLastAccessedTime()); %>
  41.             <%=formatter.format(time) %>
  42.                 <script type="text/javascript">
  43.             $(function(){
  44.                 $('#right', window.parent.document).contents().find('.login').show(); //제일 애먹었던부분
  45.                 $('#right', window.parent.document).contents().find('.logout').hide();
  46.             })
  47.         </script>  
  48.         <%}%>
  49.     </form>
  50. </body>
  51. </html>


<right.jsp>

HTML 5 0.59 KB
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.    pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. </head>
  9. <body>
  10.     <h1>RIGHT.jsp</h1><br>
  11.     <h2 class='logout'>로그인되어 있지 않은 상태입니다.</h2>
  12.     <img class='login' alt="main" src="main.jpg" width="70%" height="70%" style="display:none">
  13.     <h2 class='login' style="display:none">접속중입니다.</h2>
  14. </body>
  15. </html>


<LoginResult.jsp> ->로그인 검증

HTML 5 1.02 KB
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.    pageEncoding="UTF-8"%>  
  3.  
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9. <title>Insert title here</title>
  10. </head>
  11. <body>
  12.  
  13. <%
  14.     if("jsp".equals(request.getParameter("id")) && "1234".equals(request.getParameter("pw")))
  15.     {
  16.         session.getId();
  17.         session.setAttribute("id", "jsp");
  18.         session.setAttribute("pw", "1234");
  19. %>
  20.     <script type="text/javascript">
  21.         alert("로그인에 성공하였습니다.")
  22.         location.href="left.jsp";
  23.     </script>
  24. <%  } else {
  25.         if(session.getAttribute("id") != null)
  26.         {
  27.             session.invalidate();
  28. %>
  29.         <script type="text/javascript">
  30.             alert("로그아웃 되었습니다.");
  31.             location.href="left.jsp";
  32.         </script>
  33. <%      } %>
  34.         <script type="text/javascript">
  35.             alert("비밀번호가 틀렸습니다.");
  36.             location.href="left.jsp";
  37.         </script>
  38. <%} %>
  39.  
  40. </body>
  41. </html>






<접속 안되있을시>

<로그인 성공시>

저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Jquery, Ajax] 로그인 기능을 Ajax로 만들어서 좋았던점  (0) 2017.03.24
[AJAX, JSON] Servlet 에서 Ajax를 써서 동적으로 리플 불러오기  (0) 2017.03.24
[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기  (0) 2017.02.16
[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14

+ Recent posts

티스토리툴바