侦听iframe内容的addEventListener

Question

背景：我编写了一个书签（JavaScript），它将iframe附加到您正在查看的当前页面。这个iframe的src属性指向我的应用程序上的表单。

问题：我正在尝试使用addEventListener来检测是否已提交该表单。但是，我似乎无法访问iframe中的元素。

例如：

document.getElementById(remote_form_id).addEventListener("submit",afterSubmit,true)

不起作用，因为getElementByID调用返回null。

我目前的解决方法是在iframe上添加一个事件监听器来监听“加载”操作，然后调用一个中间函数来启动计数器，因为我知道iframe将加载的次数< / em>之前我需要调用afterSubmit（）。

document.getElementById(marklet_iframe_id).addEventListener("load",listenForSubmit,true)

function listenForSubmit(){
    if (count==1){afterSubmit();}
    count++;
}

基本上，我正在寻找一种最佳实践，因为这是一种废话。

Answer 1

您可以这样做：

var doc = document.getElementById(marklet_iframe_id).contentDocument;
var form = doc.getElementById(formId)
form.addEventListener("submit", afterSubmit, true)

Answer 2

虽然它在IE中不起作用，但您可能需要查看页面窗口对象的postMessage方法。它允许您在Windows之间异步发送字符串数据，即使同源策略禁止直接访问也是如此。

Answer 3

尝试使用给定用户浏览器中最佳可用技术的EasyXDM library来实现此目的。它也是“最佳实践”，因为它的目标是在窗口之间发送消息，而这些窗口可以处理消息，这模仿了HTML5浏览器中可用的postMessage功能。