Javascript IFrame/designmode和onkeydown事件問題

Question

如果已經回答了，請道歉。通過一些相關的問題和谷歌，但最終未能看出爲什麼這不起作用。

我的代碼如下

<iframe id="editor"></iframe> 

editorWindow = document.getElementById('editor').contentWindow; 
isCtrlDown = false; 

function loadEditor() 
{ 
    editorWindow.document.designMode = "on"; 
    editorWindow.document.onkeyup = function(e) { 
     if (e.which == 91) isCtrlDown = false; 
    } 
    editorWindow.document.onkeydown = handleKeyDown; 
} 

function handleKeyDown(e) 
{ 
    if (e.which == 91) isCtrlDown = true; 
    if (e.which == 66 && isCtrlDown) editFont('bold'); 
    if (e.which == 73 && isCtrlDown) editFont('italic'); 
} 

function editFont(a,b) 
{ 
    editorWindow.document.execCommand(a,false,b); 
    editorWindow.focus(); 
} 

此代碼工作完全在Chrome，但鍵盤快捷鍵不工作在Firefox。事實上，在Firefox中，似乎根本沒有註冊keyup/keydown的事件。

我在這裏做了一些嚴重錯誤的事情，那就是搞砸Firefox嗎？

Answer 1

爲可編輯的文檔，你需要使用addEventListener附加的關鍵事件，而不是DOM0事件處理程序的屬性：

editorWindow.document.addEventListener("keydown", handleKeyDown, false); 

如果你關心IE 6-8，你將需要測試存在addEventListener和如果缺失，則添加attachEvent等效項。

Answer 2

使用try：

editorWindow = document.getElementById('editor').frameElement; 

我不知道這將解決這個問題，也可能是：

editorWindow = document.getElementById('editor').contentDocument; 

或甚至可能：

editorWindow = document.getElementById('editor').frameElement.contentDocument; 

一件事你可以做的是把整個字符串放在一個try語句中以捕獲任何錯誤，並查看是否從iframe中獲取內容。

try { editorWindow = document.getElementById('editor').contentWindow; } catch(e) { alert(e) }; 

唯一的其他想法我是你輸入到一個文本框，這是一個iframe中，你可能不得不在onKeyDown事件添加到特定的項目，如：

var editorWindow = document.getElementById('editor').contentDocument; 
var textbox = editorWindow.getElementById('my_textbox'); 

function loadEditor() 
{ 
editorWindow.document.designMode = "on"; 
textbox.onkeydown = function(e) { 
    alert('hello there'); 
} 
} 

我希望其中之一是解決方案。我經常發現，當涉及到跨平臺功能時，它往往歸結爲一點點試錯。

祝你好運！