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

Question

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

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

Answer 1

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

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

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

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

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

См .: Как вызвать функцию на родительской странице из iframe с помощью 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>