Как прикрепить слушателя отправки ко всем формам, в том числе в фреймах и вложенных фреймах - PullRequest
1 голос
/ 23 сентября 2011

Я хочу прикрепить прослушиватель событий к каждой форме на моем сайте, чтобы при отправке формы появлялось окно подтверждения, спрашивающее, уверен ли пользователь, что он хочет продолжить.Если пользователь не уверен, я не хочу, чтобы форма запускалась.

Пока у меня есть этот код:

window.onload = function() {
  for(var i=0; i<document.forms.length; i++){
    document.forms[i].addEventListener("submit",formSubmit,false);
  }
}

function formSubmit(e) {
  if (confirm("Are you sure?")) {
    return true;
  }
  return false;
}

Примечания:

  1. Я не могу использовать jQuery
  2. Я не могу использовать функцию типа onDOMReady, потому что iframes, возможно, еще не загружены - поэтому window.onload мой единственный вариант (я думаю?)
  3. Этокод не работает, потому что, когда "Вы уверены?"Когда я отправляю форму, всплывающее окно подтверждения появляется, какую бы кнопку я ни нажимал, форма все равно отправляется.
  4. Этот код также не работает, поскольку он не принимает формы внутри фреймов.Мне нужно не только перехватывать формы внутри iframe, но и формы внутри iframes, которые находятся внутри iframes ...

Я пробовал это:

var frame = document.getElementById("frameID").contentDocument;
for(var i=0; i<frame.forms.length; i++){
  frame.forms[i].addEventListener("submit",formSubmit,false);
}

Ноон работает только для первого фрейма и, кажется, не работает, если я попал на страницу через кнопку «Назад».Это как-то связано с тем, как wondow.onload работает?

Спасибо за вашу помощь заранее!

Обновление

Из ответа, данного@Jan Pfeifer У меня есть следующий код, который решает проблему отправки формы, даже когда вы выбираете «Отмена», но он не добавляет слушателя к каждой форме в каждом кадре должным образом.Я начинаю вознаграждение за это - кто-нибудь может заставить его работать на вложенные фреймы в каждом браузере?

function attach(wnd,handler){
  for(var i=0; i<wnd.document.forms.length; i++){
    var form = wnd.document.forms[i];
    form.addEventListener('submit',handler,false);
  }

  for(var i=0; i<wnd.frames.length; i++){
    var iwnd = wnd.frames[i];               
    attach(iwnd,handler);
  }
}

function formSubmit(e){
  if(!confirm('Are you sure?')) {
    e.returnValue = false;
    if(e.preventDefault) e.preventDefault();
    return false;
  }
  return true;
}

window.addEventListener('load',function(){attach(window,formSubmit);},false);

Ответы [ 2 ]

2 голосов
/ 30 сентября 2011

Так что мне удалось решить это самому.

Было две основные проблемы:

  1. wnd.frames[i] иногда возвращал window iframe и иногдаdocument в зависимости от браузера - я изменил метод выбора iframe на wnd.document.getElementsByTagName("iframe")[i].contentWindow, что более надежно, если немного многословно.
  2. Chrome и IE оба остановили выполнение, если возвращенный window имелнеопределенный document или name, поэтому я добавил простой оператор if, чтобы уловить это.

В результате получилось следующее:

function attach(wnd,handler){
  if (!(wnd.document === undefined)) {
    for(var i=0; i<wnd.document.forms.length; i++){
      var form = wnd.document.forms[i];
      form.addEventListener('submit',handler,false);
      alert("Found form in " + wnd.name);
    }

    for(var i=0; i<wnd.document.getElementsByTagName("iframe").length; i++){
      var iwnd = wnd.document.getElementsByTagName("iframe")[i].contentWindow;
      alert("Found " + iwnd.name + " in " + wnd.name);
      attach(iwnd,handler);
    }
  }
}

function formSubmit(e){
  if(!confirm('Are you sure?')) {
    e.returnValue = false;
    if(e.preventDefault) e.preventDefault();
    return false;
  }
  return true;
}

window.addEventListener('load', function(){
  attach(window,formSubmit);
},false);
2 голосов
/ 23 сентября 2011

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

ОБНОВЛЕНИЕ Исправленные ошибки

     function attach(wnd,handler){
        for(var i=0; i<wnd.document.forms.length; i++){
            var form = wnd.document.forms[i];
                form.addEventListener('submit', handler,false);
        }

        for(var i=0; i<wnd.frames.length; i++){
            var iwnd = wnd.frames[i];               
            attach(iwnd,handler);
        }
     }

     function formSubmit(e){
        if(!confirm('Are you sure?')) {
       e.returnValue = false;
           if(e.preventDefault) e.preventDefault();
           return false;
           }
           return true;
     }

     window.addEventListener('load', function(){attach(window,formSubmit);},false);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...