2010-08-25 50 views
1

在發佈之前,我嘗試在本網站搜索解決方案,並通過谷歌,但現在運氣。onkeydown crossbrowser on IFRAME?

我對IE8存在問題,下面的這段代碼增加了一個IFRAME,並且在Chrome,Firefox和IE7中工作正常。

問題是keyHandler()函數不是隻在IE8中被觸發。

什麼是附加事件crossbrowser作爲onkeydown的最佳解決方案?

(也Safari和Opera將是不錯的支持,將在IE9也與此代碼支持?)

附:我目前使用的prototype.js,在嵌入式blank.htm有的CONTENTEDITABLE和正確的DOCTYPE - >(也是在主頁面的函數被調用)

我張貼下面的代碼和在此先感謝建議和提示

function addFrame() { 
var editorFrame = 'myEditor', iFrame; 

var newFrame = new Element('iframe', {width: '320px', height: '70px',id: editorFrame, name: editorFrame, src:'/blank.htm'}); 

$('container').appendChild(newFrame); 

if(document.all) { 
    iFrame = window.frames[editorFrame]; 

    if (window.document.addEventListener) 
     iFrame.document.addEventListener('keydown', keyHandler, false); 
    else 
     iFrame.document.attachEvent('onkeydown', keyHandler); // OK IE7 
} 
else { 
    // OK Firefox, Chrome 
    iFrame = $(editorFrame).contentWindow; 
    iFrame.addEventListener('keydown', keyHandler, false); 
} 

}

回答

3

嗯。你的代碼有幾個問題。

  1. 請勿使用document.all。這些日子完全是多餘的。
  2. 當使用addEventListener時,事件類型沒有「on」前綴,因此您希望'keydown'而不是'onkeydown'。
  3. 測試您即將使用的對象,而是根據不相關對象的存在進行推理。直接測試addEventListener
  4. Chrome和Firefox的分支是不必要的。您可以在所有最新的瀏覽器中使用contentWindow,雖然它是非標準的(標準爲contentDocument.defaultView)。
  5. ​​處理程序可以應用於所有瀏覽器中的iframe文檔。

我不知道是否IE 8的問題可能是document.all可能已被刪除,但我不知道。我自1999年以來沒有在任何代碼中使用document.all.

我發生的另一種可能性是window.frames使用幀的name而不是其ID。

UPDATE

道歉,我沒測試我的代碼。現在經過測試,我意識到它比我想起來更難。您不能安全地附加​​處理程序,直到加載iframe文檔,這使事情有點棘手。使所有瀏覽器都能正常工作的最簡單方法是處理load事件blank.htm並調用主頁上的函數:

空白。HTM,添加以下內容:

<script type="text/javascript"> 
    window.onload = function() { 
     parent.iframeLoaded(); 
    }; 
</script> 

在主文檔:

function addFrame() { 
    var editorFrame = 'myEditor', iFrame; 

    var newFrame = new Element('iframe', { 
     width: '520', // width and height properties do not have units 
     height: '200', 
     id: editorFrame, 
     name: editorFrame, 
     src: 'blank.htm' 
    }); 

    $('container').appendChild(newFrame); 

    window.iframeLoaded = function() { 
     var iframeDoc, UNDEF = "undefined"; 
     if (typeof newFrame.contentDocument != UNDEF) { 
      iframeDoc = newFrame.contentDocument; 
     } else if (typeof newFrame.contentWindow != UNDEF) { 
      iframeDoc = newFrame.contentWindow.document; 
     } else { 
      throw new Error("Unable to access iframe document"); 
     } 

     if (typeof iframeDoc.addEventListener != UNDEF) { 
      iframeDoc.addEventListener('keydown', keyHandler, false); 
     } else if (typeof iframeDoc.attachEvent != UNDEF) { 
      iframeDoc.attachEvent('onkeydown', keyHandler); // OK IE7 
     } 
    }; 
} 
+0

首先感謝烏拉圭回合的努力,我真的apreciated,但使用代碼'只在IE7和Firefox'工作。 Chrome和IE8不工作:(我在錯誤的東西? – 2010-08-25 17:43:56

+0

沒有。我沒有測試我的代碼,對不起。現在重寫。 – 2010-08-25 22:51:26

+0

蒂姆,你做了一個很好的工作,我相信你花了很多時間來修復,因爲我也是,使用所有可用的調試工具,但沒有運氣。感謝這樣做,是的,問題是等待框架加載。我也用Opera測試過,並且工作正常。真的非常感謝!! ps我試着給我一個投票我的名聲我慢了,所以我不能,'這是我的小投票+ 10';) – 2010-08-26 08:12:38