addEventListener監聽iframe的內容

背景：我已經編寫了一個bookmarklet（JavaScript），它將iframe添加到您正在查看的當前頁面。此iframe的src屬性指向我的應用程序的表單。addEventListener監聽iframe的內容

問題：我想利用addEventListener來檢測表單是否已經提交。但是，我似乎無法訪問iframe中的元素。

例如：

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

因爲的getElementById調用返回null不起作用。

我目前的解決辦法是對iframe中添加事件偵聽器監聽「負載」的操作，然後調用一箇中介的作用，即UPS抗衡，因爲我知道的iframe多少次是之前加載我需要調用afterSubmit（）。

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

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

基本上，我正在尋找一個最佳實踐，因爲這是一個廢話的方法。

來源

2010-11-14 anxiety

雖然沒有在IE瀏覽器，你可能想看看網頁的窗口對象的postMessage方法。它允許您在窗口之間異步發送字符串數據，即使直接訪問被同一策略禁止時也是如此。

來源

2010-11-14 23:20:55 PleaseStand

這是一個有趣的方法。然而，我寧願有一點變通辦法，適應IE .. – anxiety 2010-11-15 00:39:25

@anxiety：其實，進一步閱讀，似乎IE 8+（不是IE 7或以下）支持postMessage（只在iframe之間，而不是自包含的窗口之間，但該部分不應該是你的問題）。 – PleaseStand 2010-11-18 04:00:55

你可以做這樣的事情：

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

來源

2010-11-14 22:39:01 Aishwar

如果這樣的訪問會違反同源策略 - 如果這兩個頁面使用不同的主機名，端口號或協議，則這將不起作用。 – PleaseStand 2010-11-14 23:17:42

就我而言，它們使用兩個不同的主機名。 – anxiety 2010-11-15 00:12:06

嘗試EasyXDM library，它使用給定用戶的瀏覽器中最好的技術來實現此目的。它也是「最佳實踐-y」，因爲它的目標是在窗口之間發送消息，並由這些窗口來處理消息，這些消息模仿HTML5瀏覽器中提供的postMessage功能。

來源

2010-11-15 01:52:12

addEventListener監聽iframe的內容

回答

相關問題