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

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

注意事项：

1. 我不能使用 jQuery
2. 我不能使用 onDOMReady 类型的函数，因为 iframe 可能尚未加载 - 所以window.onload 是我唯一的选择（我认为？）
3. 此代码不起作用，因为当“您确定吗？”提交表单时弹出确认框，无论我点击哪个按钮，表单仍然提交。
4. 此代码也不起作用，因为它不会在 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

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

有两个主要问题：

1. wnd.frames[i] 有时会返回 iframe 的 window，有时会返回 document，具体取决于浏览器 - 我已将选择 iframe 的方法更改为 wnd.document.getElementsByTagName("iframe")[i].contentWindow，如果有点罗嗦，这会更可靠。
2. 如果返回的 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);