iframe을 통해 함수를 사용하려면 어떻게해야합니까?

Question

상단에 양식이 있고 하단에 테이블이있는 웹 페이지가 있습니다. 양식을 사용하면 사용자가 정보를 제출하고 이미지를 업로드 할 수 있으며 양식의 대상은 iframe이며 height = 0 width = 0으로 설정됩니다. 이유는 내가 페이지를 새로 고치고 할당 된 작업 페이지로 이동하는 것을 방지하기 위해서였습니다. 이 테이블은 다른 사용자 데이터의 몇 행에 불과합니다. 사용자가 데이터를 제출하면 이벤트를 호출하여 새 데이터로 테이블을 새로 고칩니다.

제출 후 새 페이지로 이동하지 않고 표와 양식을 새로 고치는 방법이 있습니까? iframe을 사용하여이 작업을 수행 할 수 있습니까? 아니면 다른 방법을 시도해야합니까? 지금 당장 가지고있는 유일한 아이디어는 iframe을 사용하고 제출 후 페이지가 새 페이지로 이동하지 못하게하는 것입니다.

Answer 1

이것은 AJAX 기술에 유용합니다. 서버를 호출하면 현재 페이지의 지정된 래퍼 요소로로드되는 HTML 조각을 다시 보냅니다.

표준 JavaScript를 사용하여이 모든 작업을 수행 할 수 있지만 대부분 브라우저를 사용하여 모든 브라우저 문제를 처리합니다. 가장 인기있는 것은 jQuery입니다.

jQuery는 JavaScript로 작성되었으며 다양한 기능을 추가하여 많은 코드를 작성하지 않고도 바로 가기와 향상된 기능을 제공합니다.

참조 : 귀하의 경우 http://api.jquery.com/jQuery.ajax/

는 Iframe에 부모 페이지에서 아약스 함수를 호출 할 자바 스크립트 블록을 포함한다.

참조 : How to call function on parent page from iframe using jQuery?

Answer 2

iframe이 양식이 테이블을 업데이트 내가 소위 "게시"이벤트 처리기를 호출합니다 게시 할 때, 당신이 사용할 수있는 온로드 이벤트 핸들러를 가지고있다.

<script> 
    function posted(str){ 
     var matches=str.match(/^.*\?data=(.*)$/); 
     if(matches) 
      document.getElementById("data").innerHTML+=matches[1]+"<br/>"; 
    } 
    </script> 
    <form method='get' action='nowhere.html' target='frame'> 
     <input name='data'/> 
    </form> 
    <table width="100%" border=1> 
     <tr><td id='data'></td></tr> 
    </table>  

    <iframe style='display:none' name='frame' onload="posted(this.contentWindow.location.href)"> 
    </iframe>