檢查瀏覽器是否支持iFrame上的加載方法

我試圖編寫一個簡單的表單，上傳文件的目標是iFrame。我已經詳細介紹了它，但Internet Explorer不支持動態生成的iFrame上的加載方法，所以我需要爲它做一個替代方法。我的問題是 - 什麼是使用Javascript來識別瀏覽器類型的最好和最準確的（加光）方法？檢查瀏覽器是否支持iFrame上的加載方法

我知道Modernizr可以檢查特定的方法/屬性，但不太確定它是否有助於這種特定的情況。它有Modernizr.hasEvent()，但我不能用它來檢查動態創建的元素。

來源

2012-08-13 Spencer Mark

你能澄清，如果你想檢測是否你iframe支持'onload'事件，還是別的？「加載方法」有點含糊:) – jstr 2012-08-13 11:42:20

對不起 - 這是加載事件（在IE中onload） - 但動態生成的iframe。 – 2012-08-13 11:47:53

最簡單的方法來檢查這一點，在我看來會是：

if ('onload' in iFrameVar) 
{ 
    console.log('your code here'); 
}

哪裏iFrameVar是一個iframe參考，當然：

function elemSupportsEvent(elem,e) 
{ 
    var f = document.createElement(elem); 
    if (e in f) 
    { 
     console.log(elem + ' supports the '+ e + ' event'); 
     return true; 
    } 
    console.log(elem + ' doesn\'t support the '+ e + ' event'); 
    return false; 
} 
elemSupportsEvent('iframe','onload');//logs "iframe supports the onload event" in chrome and IE8

只是quick fiddle通過舉例，你如何使用一個函數來檢查各種元素的事件支持的手段。

在回答您的評論：如果您想爲您在AJAX動態內容-as replies-你可以簡單地使用readystatechange事件：

xhr.onreadystatechange = function() 
{ 
    if (this.readyState === 4 && this.status === 200) 
    { 
     var parent = document.getElementById('targetContainerId');//suppose you're injecting the html here: 
     parent.innerHTML += this.responseText;//append HTML 
     onloadCallback.apply(parent,[this]);//call handler, with parent element as context, pass xhr object as argument 
    } 
}; 
function onloadCallback(xhr) 
{ 
    //this === parent, so this.id === 'targetContainerId' 
    //xhr.responseText === appended HTML, xhr.status === 200 etc... 
    alert('additional content was loaded in the '+ this.tagName.toLowerCase+'#'+this.id); 
    //alerts "additional content was loaded in the div/iframe/td/whatever#targetContainerID" 
}

來源

2012-08-13 11:41:31

這是要與動態生成的元素一起工作嗎？ – 2012-08-13 11:48:35

取決於動態生成元素的含義，如果你的意思是'document.createElement'，那麼顯然（代碼創建一個空節點來檢查事件是否受支持），如果你的意思是ajax內容，那麼我想它也是如此 - 但在後一種情況下，您有'onreadystatechange'事件，如果'readyState === 4'和'status === 200'，則無論如何您都可以應用'onready'事件處理程序，只是因爲你知道內容已被加載 – 2012-08-13 12:03:48

我的動態意思是在按鈕單擊事件上創建iframe。我嘗試了'onready'事件處理程序，但似乎沒有工作。我見過其他地方的一些評論，說IE需要在動態生成的iframe中使用iframe的onload =「」屬性才能工作，但我需要將一些參數傳遞給調用方法，因此它不適合我。 – 2012-08-13 12:10:48

使用navigator.userAgent。它包含了瀏覽器的用戶代理

if (navigator.userAgent.search("MSIE 6") == -1){ 
    // We've got IE. 
}

來源

2012-08-13 11:36:02

討厭！您應該儘可能避免檢測瀏覽器並檢測對象！請參閱http://www.quirksmode.org/js/support.html – jstr 2012-08-13 11:39:11

對OP說。我只是回答他的問題:) – 2012-08-13 11:40:28

如果要檢查特定事件的支持，你可以嘗試這樣的事：

var isEventSupported = (function(){ 
    var TAGNAMES = { 
     'select':'input','change':'input', 
     'submit':'form','reset':'form', 
     'error':'img','load':'img','abort':'img' 
    } 
    function isEventSupported(eventName) { 
     var el = document.createElement(TAGNAMES[eventName] || 'div'); 
     eventName = 'on' + eventName; 
     var isSupported = (eventName in el); 
     if (!isSupported) { 
     el.setAttribute(eventName, 'return;'); 
     isSupported = typeof el[eventName] == 'function'; 
     } 
     el = null; 
     return isSupported; 
    } 
    return isEventSupported; 
    })();

這裏是上面的現場演示：

http://kangax.github.com/iseventsupported/

來源

2012-08-13 11:40:54 Shreedhar

這是要在IE中動態生成iframes嗎？ – 2012-08-13 11:44:41

你可以在dom準備好之後調用這個函數:) – Shreedhar 2012-08-13 11:47:51

如果我錯了，請糾正我，但是你沒有在TAGNAMES中包含'load'：'iframe'？這是故意的 - 它會在沒有它的iframe上工作嗎？ – 2012-08-13 11:50:41

檢查瀏覽器是否支持iFrame上的加載方法

回答

相關問題