как использовать функцию через iframe?

У меня есть веб-страница с формой вверху и таблицей внизу. Форма позволяет пользователям отправлять информацию, а также загружать изображение, целью формы является iframe, для которого задана высота = 0, ширина = 0. Причина, по которой я сделал это, заключалась в том, чтобы предотвратить обновление страницы и переход на назначенную страницу действия. Таблица — это всего лишь несколько строк различных пользовательских данных. Когда пользователь отправляет данные, я хочу вызвать событие, чтобы обновить таблицу новыми данными.

Есть ли способ обновить таблицу и форму после отправки, не переходя на новую страницу? Это выполнимо с помощью iframe или я должен попробовать какой-то другой метод? Прямо сейчас единственная идея, которая у меня есть, - это использовать iframe, и это предотвращает переход страницы на новую страницу после отправки.


javascript forms javascript-events
person iCodeLikeImDrunk    schedule 02.02.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это хорошо для методов AJAX — вы делаете вызов серверу, и он отправляет обратно фрагмент HTML, который загружается в указанный элемент-оболочку на текущей странице.

Хотя вы можете сделать все это с помощью стандартного JavaScript, большинство из них используют библиотеки для решения всех проблем, связанных с кроссбраузерностью. Наиболее популярным является jQuery.

jQuery написан на JavaScript и расширяет его функциональность, предоставляя вам отличные ярлыки и расширенные функции без написания большого количества кода.

См.: http://api.jquery.com/jQuery.ajax/.

В вашем случае Iframe будет включать блок JavaScript, который вызовет функцию Ajax на родительской странице.

См.: Как вызвать функцию на родительской странице из iframe с использованием jQuery?

person Diodeus - James MacFarlane    schedule 02.02.2012

arrow_upward
-1
arrow_downward

у 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>
person Charlie Frank    schedule 02.02.2012
comment
я вижу, что вы делаете, но я использую метод post. - person iCodeLikeImDrunk; 02.02.2012