跨域iframe內容負載檢測

我有一個相當有趣的問題。我有一個父頁面，將創建一個模式jQuery對話框與對話框中包含的iframe。 iframe將填充來自第三方域的內容。我的問題是我需要創建一些對話級別的javascript，它可以檢測iframe的內容是否成功加載，並且它是否在5秒內沒有，然後關閉對話框並將用戶返回到父頁面。跨域iframe內容負載檢測

我研究了許多解決方案，只有兩個是真正的價值。

獲取遠程站點以包含document.domain ='our-domain.com'的javascript行。
使用網址片段破解，但我需要遠程站點能夠通過將#some_value附加到URL的末尾來修改URL，並且我的對話窗口必須輪詢URL直到它要麼看到它，要麼超時。

這些老老實實是我唯一的選擇嗎？有沒有簡單的方法來檢測這個？

我一直在研究是否有方法來查詢http響應錯誤，但這仍然侷限於相同的限制。

任何幫助將非常感激。

感謝

來源

2010-05-02 rik_davis

最簡單的方法（如果您可以獲取代碼添加到外部網站）是讓他們添加一個不可見的iframe指向您的域上的特殊html文件。然後這可以使用parent.parent.foo()來通知原始窗口關於加載事件。

監聽「加載」事件只會告訴你是否加載了窗口，而不是加載的內容或文檔是否準備好進行交互。

來源

2010-05-03 07:46:52

這聽起來像是一個明確的選擇。我會向開發者提出這個建議，看看他們是否會考慮這個選項。謝謝！ – 2010-07-07 11:36:22

+1，用於暗示我認爲是針對特定問題的* only *解決方案！謝謝。 – Town 2010-10-15 08:27:54

這個工作出色，儘管有點出人意料，直到你想到它。 – Kaganar 2015-04-28 21:13:31

你可以嘗試使用postMessage的幀之間的通信。
這將要求遠程站點包含一些特定的JavaScript，以在完成加載時向父文檔發佈消息。

來源

2010-05-02 17:35:52 Dror

我可以，是的，但只能在IE8。對不起，我應該提到，根據我們客戶的規範，此功能必須適用於IE 6,7和8。 – 2010-05-02 17:37:03

[無恥廣告]我做了一個微型框架，以方便這一點，同時幫助您不要在您的網站上打開安全錯誤：https：//github.com/Okrajs/Okrajs – 2015-07-24 23:23:32

Nicholas Zakas有一篇關於檢測iframe是否加載的文章：http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/。基本上，你有這樣的代碼片段：

var iframe = document.createElement("iframe"); 
iframe.src = "simpleinner.htm"; 

if (iframe.attachEvent){ 
    iframe.attachEvent("onload", function(){ 
     alert("Local iframe is now loaded."); 
    }); 
} else { 
    iframe.onload = function(){ 
     alert("Local iframe is now loaded."); 
    }; 
} 

document.body.appendChild(iframe);

我沒有測試過，但我敢肯定的jQuery應該能夠通過執行類似$("#iframe").load(function() { alert("Local iframe is now loaded."); });

來源

2010-05-02 18:40:29 juandopazo

謝謝你的代碼片段。我會嘗試一下，看看它是如何工作的。 – 2010-05-02 19:29:53

在任何情況下，你會需要一些處理它如果您嘗試濫用Same Origin Policy (SOP)

如果域不同，則第一個解決方案document.domain=...將不起作用。它僅適用於子域和端口，如上面的鏈接所述。

允許跨域通信而不進行輪詢的唯一選擇是JSONP或帶有JS函數回調的腳本注入。此方法適用於所有Google API，並且運行良好。

我們已經在our blog上解釋了一種在iframe中對這些調用進行沙箱的方法，以保護它們。雖然postMessage現在更好，但window.name hack具有在舊瀏覽器上工作的優勢。具有諷刺意味的是，SOP不會阻止你將任何東西發佈到另一個域。但是你將無法閱讀迴應。

來源

2010-05-02 18:41:27 Mic

好吧，我並不是想「濫用」SOP政策，但是對此的需求正處於用戶活動的關鍵階段。是的，我確實需要這個工作在上述瀏覽器上。奇怪的是，目前沒有其他瀏覽器在他們的規範。然而！我會去看看這些鏈接，並感謝您的額外信息。 – 2010-05-02 19:33:00

可以在iframe本身的onload處理程序上做到這一點。不幸的是（驚喜！）IE讓它變得困難。唯一可以實現這個功能的方法是爲iframe編寫HTML，然後將其附加到innerHTML的文檔中。然後我必須進行輪詢以查看iframe何時出現在DOM中，這取決於頁面是否加載。這是一個鏈接到源：http://svn.openlaszlo.org/openlaszlo/trunk/lps/includes/source/iframemanager.js

請參閱create(),__finishCreate()和gotload()。隨意採取這個副本，並使用它自己！

問候，最大卡爾森 OpenLaszlo.org

來源

2010-07-30 20:38:00

感謝您提供可能的解決方案，Max。我的同事＆我決定嘗試使用postMessage方法。雖然這不適用於IE 6和7，但我們確實發現，如果我們能夠讓客戶同意使用postMessage，那麼我們就能滿足我們的迫切需求。我會很樂意檢查你的建議，儘管人們永遠不會有足夠的技巧。 :) – 2010-07-31 03:43:13

跨域iframe內容負載檢測

回答

相關問題