IFRAME加載完成時的Javascript回調？

135

我需要在IFRAME完成加載時執行回調。我無法控制IFRAME中的內容，所以我無法從那裏觸發回調。IFRAME加載完成時的Javascript回調？

這個IFRAME是編程式創建的，我需要將其數據作爲變量傳遞給回調，並且銷燬iframe。

任何想法？

編輯：

這是我現在有：

function xssRequest(url, callback) 
{ 
    var iFrameObj = document.createElement('IFRAME'); 
    iFrameObj.src = url;    
    document.body.appendChild(iFrameObj); 

    $(iFrameObj).load(function() 
    { 
     document.body.removeChild(iFrameObj); 
     callback(iFrameObj.innerHTML); 
    }); 
}

內嵌框架之前，此callsback已加載，所以回調沒有返回的數據。

來源

2008-10-02 FlySwat

我想你不想在iframe本身附加事件處理程序，但它是內容窗口。 – bobwienholt 2008-10-02 19:37:59

問題是跨域請求。如果iframe來自另一個域，則不能這樣做 – Victor 2008-12-05 10:15:43

實際上，每次iframe加載文檔時都會觸發iframe對象上的加載事件，否則，每次加載後都需要連接到窗口。 – 2011-01-13 22:18:37

我在過去遇到過完全相同的問題，我發現修復它的唯一方法是將回調添加到iframe頁面。當然，只有當你控制iframe內容時纔有效。

來源

2008-10-02 19:34:53 roryf

我看不出這個建議有什麼問題，爲什麼它是投下來。有些人呃...... – roryf 2008-10-02 20:37:07

+18

我沒有投票給你，但我想你被拒絕了，因爲你提出了他所說的他不能做的確切的事情 - 他明確地說過，「我無法控制內容在IFRAME中，所以我不能從那裏解除回調。「 – 2009-01-18 13:39:07

我在我的項目中有一個類似的代碼，工作正常。適應我的代碼到你的功能，解決方案可能是以下幾點：

function xssRequest(url, callback) 
{ 
    var iFrameObj = document.createElement('IFRAME'); 
    iFrameObj.id = 'myUniqueID'; 
    document.body.appendChild(iFrameObj);  
    iFrameObj.src = url;       

    $(iFrameObj).load(function() 
    { 
     callback(window['myUniqueID'].document.body.innerHTML); 
     document.body.removeChild(iFrameObj); 
    }); 
}

也許你有一個空的innerHTML，因爲（一個或兩個原因）： 1.你應該使用它反身元素 2。你已經從你的頁面中刪除了iframe DOM

來源

2008-10-15 13:52:53

首先，功能名稱xssRequest它聽起來像你正在嘗試跨站請求 - 如果這是正確的，你不能夠閱讀iframe的內容。

在另一方面，如果iframe的網址是您的域名就可以訪問身體，但我發現，如果我使用超時刪除的iframe回調正常工作：

// possibly excessive use of jQuery - but I've got a live working example in production 
$('#myUniqueID').load(function() { 
    if (typeof callback == 'function') { 
    callback($('body', this.contentWindow.document).html()); 
    } 
    setTimeout(function() {$('#frameId').remove();}, 50); 
});

來源

2008-10-16 18:31:38

如果word文檔和pdf等文檔正在傳輸到iframe並找到可以很好地工作的解決方案，我必須這樣做。關鍵是處理iframe上的onreadystatechanged事件。

可以說你的框架的名稱是「myIframe」。在你的代碼的啓動首先某處（我做內聯任何地方的iframe後）添加像這樣以註冊事件處理程序：

document.getElementById('myIframe').onreadystatechange = MyIframeReadyStateChanged;

我無法在iframe中使用onreadystatechage屬性，我可以」不要忘記爲什麼，但應用程序必須在IE 7和Safari 3中工作，這可能是一個因素。

這裏是如何獲得完整狀態的一個例子：

function MyIframeReadyStateChanged() 
{ 
    if(document.getElementById('myIframe').readyState == 'complete') 
    { 
     // Do your complete stuff here. 
    } 
}

來源

2008-12-05 05:33:44

我覺得load事件是正確的。什麼是不正確的是你用來從iframe內容中檢索內容的方式。

你需要的是在iframe中加載的頁面的html而不是iframe對象的html。

您需要做的是使用iFrameObj.contentDocument訪問內容文檔。如果它位於當前頁面的同一個域中，則返回在iframe中加載的頁面的dom。

我會在刪除iframe之前檢索內容。

我已經在Firefox和Opera中測試過。

那麼我認爲你可以用$(childDom).html()或$(childDom).find('some selector') ...

來源

2009-08-25 13:33:03

您的IFRAME的innerHTML是空的，因爲你的iframe標籤不圍繞父文檔中的任何內容retreive您的數據。爲了從iframe的src屬性引用的頁面獲取內容，您需要訪問iframe的contentDocument屬性。如果src來自不同的域，則會引發異常。這是一項安全功能，可防止您在其他人的頁面上執行任意JavaScript，這會造成跨站腳本漏洞。下面是一些示例代碼說明了什麼我談論：

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"></script> 

<h1>Parent</h1> 

<script type="text/javascript"> 
function on_load(iframe) { 
    try { 
    // Displays the first 50 chars in the innerHTML of the 
    // body of the page that the iframe is showing. 
    // EDIT 2012-04-17: for wider support, fallback to contentWindow.document 
    var doc = iframe.contentDocument || iframe.contentWindow.document; 
    alert(doc.body.innerHTML.substring(0, 50)); 
    } catch (e) { 
    // This can happen if the src of the iframe is 
    // on another domain 
    alert('exception: ' + e); 
    } 
} 
</script> 
<iframe id="child" src="iframe_content.html" onload="on_load(this)"></iframe>

要進一步例如，嘗試以此爲iframe的內容：

<h1>Child</h1> 

<a href="http://www.google.com/">Google</a> 

<p>Use the preceeding link to change the src of the iframe 
to see what happens when the src domain is different from 
that of the parent page</p>

來源

2010-02-12 10:32:50 allyourcode

我也有類似的問題，因爲你。我所做的是我使用了一種名爲jQuery的東西。然後你在JavaScript代碼中做什麼是這樣的：

$(function(){ //this is regular jQuery code. It waits for the dom to load fully the first time you open the page. 

    $("#myIframeId").load(function(){ 
     callback($("#myIframeId").html()); 
     $("#myIframeId").remove(); 

    }); 

});

看起來像你刪除你的iFrame之前，你從它抓取的HTML。現在，我確實看到了一個問題：p

希望這有助於:)。

來源

2011-09-10 08:23:47 Automatico

我使用jQuery和令人驚訝的，這似乎是我只是測試，並加載了沉重的頁面加載和我沒有得到警報幾秒鐘，直到我看到的iframe負荷：

$('#the_iframe').load(function(){ 
    alert('loaded!'); 
});

所以如果你不想使用jQuery看看他們的源代碼，看看這個函數與iframe DOM元素的行爲是否不同，我會在稍後感興趣並在這裏發佈。此外，我只在最新的鉻版中進行測試。

來源

2013-05-03 16:12:24 Neo

我想隱藏等待的微調div當我的框架內容是完全加載在IE上，我嘗試從字面上提到每個解決方案中提到的Stackoverflow.Com，但沒有任何工作，因爲我想。

然後，我有一個想法，當我的幀內容被完全加載，$（窗口）加載事件可能會被解僱。而這正是發生了什麼事。所以，我寫了這個小腳本，並像魔術一樣工作：

 $(window).load(function() { 
    //alert("Done window ready "); 
    var lblWait = document.getElementById("lblWait"); 
    if (lblWait != null) { 
     lblWait.style.visibility = "false"; 
     document.getElementById("divWait").style.display = "none"; 
    } 
});

希望這會有所幫助。

來源

2014-12-10 08:16:19

IFRAME加載完成時的Javascript回調？

回答

相關問題