Отправка форм из нескольких фреймов в Firefox

У меня есть страница, содержащая несколько фреймов. Все фреймы ссылаются на одну и ту же страницу. Каждая страница iframe содержит форму, которую я хочу отправить на сервер. На странице, содержащей фреймы, есть кнопка «Отправить все», которая при нажатии вызывает эту функцию:

    function submitAll() {
    var fs = d3.selectAll('iframe')[0];
    for (var i = 0; i < fs.length; i++) {
        try {
            var el = fs[i];
            var doc = el.contentDocument;
            var root = el.contentWindow['root'];
            var f = doc.getElementById('submit-form');
            removeParentNodeReference(root);
            doc.getElementById('POST-name').value = document.getElementById('name').value;
            doc.getElementById('POST-email').value = document.getElementById('email').value;
            doc.getElementById('POST-phone').value = document.getElementById('phone-number').value;
            doc.getElementById('POST-json').value = JSON.stringify(root);
            doc.getElementById('POST-submit-info').click();
        }
        catch (e) {
            console.log(e.message);
        }
    }

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

В chrome отправляются все формы iframe. Однако в Firefox отправка формы будет происходить только для первой формы. Я зашел в отладчик и вижу, что, хотя он зацикливается на всех страницах iframe, на самом деле происходит только одна отправка.

У кого-нибудь есть идеи?

Спасибо.


javascript forms html iframe
person Quy    schedule 26.06.2014    source источник
comment
Вы пытаетесь спамить сайт?   -  person blex    schedule 26.06.2014
comment
@blex совсем нет. Страница в iframe находится на моем веб-сервере. Я не уверен, что это лучшая реализация для варианта использования (с использованием одного или нескольких фреймов) или нет. У меня есть страница, которая создает дерево с помощью d3. Пользователь может создавать или не создавать несколько таких деревьев. Если они это сделают, они будут каждый раз создавать новый iframe (и вкладку для него). В случае, когда они создают несколько деревьев, я хочу отправить каждое созданное ими дерево на сервер, чтобы сохранить его в базе данных для последующей обработки.   -  person Quy    schedule 27.06.2014
comment
о, хорошо, я не заметил d3 для подключения. Ну, я не знаю, как работает d3, но вместо того, чтобы использовать несколько iframe, вам стоит посмотреть на Ajax (вы можете размещать сколько угодно форм, не покидая страницы и без всяких iframe) -> Посмотрите здесь :)   -  person blex    schedule 27.06.2014

Ответы (2)


arrow_upward
1
arrow_downward

Вместо использования iframe вы можете использовать Ajax, который не нужно будет устанавливать вверх несколько фреймов. Ajax позволяет делать запросы к страницам, чтобы либо получить их содержимое, либо отправить данные.

Пример

В этом примере я собираюсь использовать для этого jQuery, у которого более простой синтаксис, чем у чистого javascript. Не забудьте включить jQuery на свою страницу, чтобы это работало.

Поскольку я не знаю, как вы определяете количество отправок, я предполагаю, что вы задали его в качестве параметра следующей функции:

function submitAll(n){
    /* Get the values from your form
       --> they need to have the same name as in
       your php code (e.g "POST-name", etc) */
    var values = $("#myForm").serialize();

    /* Submit them n times */
    for(var i = 1; i <= n; i++){
        $.ajax({
            url: "yourpage.php",
            type: "post", // or get
            data: values, // declared above
            success: function(){
                console.log("Request "+i+"/"+n+" sent successfully.");
            },
            error: function(){
                console.log("Request "+i+"/"+n+" failed.");
            }
        });
    }
}

Хорошо знать

Ajax является асинхронным, что означает, что код javascript, расположенный после него, продолжает выполняться, пока запрос ajax ожидает ответа от вашего сервера. Если, например, вы поместите эту строку в конец функции:

console.log("End of submitAll");

Вероятно, он будет выполнен до того, как вы получите какой-либо из n ответов.

Я надеюсь, что это поможет, если вы попробуете это и столкнетесь с проблемой, сообщите нам об этом.

person blex    schedule 27.06.2014
comment
Хотя я согласился с этим предложением, мне все еще любопытно, почему выбор всех фреймов и ручная отправка формы документа каждого фрейма не работает в Firefox, и есть ли для этого общий обходной путь. - person Quy; 30.06.2014
comment
@Quy Спасибо, что приняли этот ответ. Хотя я не уверен, почему у вас возникла эта проблема, я подумал, что вам будет лучше избегать использования нескольких фреймов. Их часто считают плохой практикой, и их следует использовать в определенных случаях или если нет других доступных вариантов. Однако я надеюсь, что когда-нибудь вы найдете ответ на этот загадочный баг! - person blex; 30.06.2014
comment
Согласитесь с @blex, так проще рассматривать каждый iframe как автономный компонент. это также упрощает поддержку вашего приложения. - person alcedo; 27.09.2015

arrow_upward
1
arrow_downward

У меня такая же проблема. Я решил это, добавив класс в iframe (notsendiframe). if($(".notsendiframe").length) { // переименование класса iframe // отправка первого iframe $(".notsendiframe")[0] } на опубликованной странице iframe я добавил JS, который снова запускает JS из родителя. (поэтому будет отправлен следующий iframe), возможно, вам нужно сначала показать iframe, прежде чем отправлять его.

person tryitdifferent    schedule 27.09.2015