javascript - 如何将提交监听器附加到所有表单，包括 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

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

主要有两个问题:

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