Question

我想在我的网站上为每个表单附加一个事件监听器，以便在提交表单时，会弹出一个确认框，询问用户是否确定要继续。如果用户不确定，我不希望表单触发。

到目前为止，我有这段代码：

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

注意：

我不能使用jQuery
我无法使用onDOMReady类型函数，因为iframe可能尚未加载 - 所以window.onload是我唯一的选择（我认为？）
此代码不起作用，因为“你确定吗？”当我提交表单时，弹出确认框，无论我点击哪个按钮，表单仍然提交。
此代码也不起作用，因为它不会在iframe中拾取表单。我不仅需要捕捉iframe中的表单，还需要在iframe中的iframe中表单...

我试过这个：

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给出的答案，我有以下代码解决了即使您选择“取消”时表单仍然提交的问题，但它没有正确地将侦听器添加到每个帧中的每个表单。我正在为此开始一个赏金 - 任何人都可以让它适用于每个浏览器中嵌套的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);

Answer 1

你需要递归。 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);

Answer 2

所以我自己设法解决了这个问题。

有两个主要问题：

wnd.frames[i]有时会返回iframe的window，有时会返回document，具体取决于浏览器 - 我已经将选择iframe的方法更改为wnd.document.getElementsByTagName("iframe")[i].contentWindow如果有点罗嗦，那就更可靠了。
如果返回的window有一个未定义的document或name，Chrome和IE都会停止执行，所以我添加了一个简单的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);

如何将提交侦听器附加到所有表单，包括iframe和嵌套iframe中的表单

2 个答案: