iframe経由で関数を使用するにはどうすればよいですか？

Question

私は上部にフォームを、下部にテーブルを持つWebページを持っています。このフォームでは、ユーザーが情報を送信してイメージをアップロードすることができます。フォームのターゲットは、高さ= 0のwidth = 0に設定されたiframeです。理由は私がこれをしたのは、ページが更新され、割り当てられたアクションページに行くのを防ぐためでした。この表は、異なるユーザーデータのわずかな行です。ユーザーがデータを送信すると、新しいデータでテーブルを更新するイベントを呼び出す必要があります。

新しいページに移動することなく、送信後に表とフォームをリフレッシュする方法はありますか？これはiframeを使用して行うことができますか、他の方法を試す必要がありますか？私が持っている唯一のアイデアは、iframeを使用していて、送信後にページが新しいページに移動することを防ぎます。

Answer 1

これはAJAXテクニックに適しています。サーバーに電話をかけ、現在のページの指定されたラッパー要素にロードされたHTMLフラグメントを戻します。

標準のJavaScriptを使用してこのすべてを実行できますが、ほとんどの場合、ライブラリを使用してブラウザ間のすべての問題を処理します。最も人気があるのはjQueryです。

jQueryはJavaScriptで書かれており、多くのコードを記述することなく、すばらしいショートカットや拡張機能を提供するためにその機能を拡張しています。

を参照してください：あなたのケースではhttp://api.jquery.com/jQuery.ajax/

、インラインフレームは、親ページにAjaxの機能を呼び出すことになる、JavaScriptをブロックが含まれるであろう。

参照：How to call function on parent page from iframe using jQuery?

Answer 2

のiframeを使用すると、使用できるのonloadイベントハンドラ、フォームがポストされたとき、それは私がテーブルを更新している、「投稿」と呼ばれるイベントハンドラを呼び出すがあります。

<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>