iframe如何捕捉像閃光燈一樣的鍵盤？

我已經做了一個JS/HTML5遊戲，它是由鍵盤控制的，我喜歡使它像嵌入式Flash遊戲一樣可嵌入，但是當我將它嵌入到iframe中時，它只能在iframe集中時捕獲鍵盤事件。如果用戶與頁面上的其他元素交互，iframe將失去焦點並且遊戲不會接收事件。iframe如何捕捉像閃光燈一樣的鍵盤？

我該如何使它始終從內部iframe中捕獲鍵盤事件並避免像Flash遊戲那樣的默認值？例如，從iframe內部使用空間來代替滾動。

爲什麼要投票？

來源

2014-01-31 Ali Shakiba

我有一個應用程序，它在iframe中工作得很好。它使用箭頭鍵，轉義等。只需要關注iframe，否則主頁將捕獲關鍵事件。你的問題究竟在哪裏？你是如何編碼的？使用jQuery？你是否防止默認（e.preventDefault）？絕對需要更多信息。 – Abhitalks

@abhitalks使用任何東西都可以。問題在於，保持iframe的重點幾乎是不可能的。如果用戶與頁面上的其他元素進行交互，iframe將失去焦點（與Flash遊戲不同，它將不再接收事件）。 –

爲什麼你會在這個世界做出這個？您可以使用全屏或自定義腳本來自動聚焦iframe，但這裏提出的問題確實是一個錯誤的問題。 – ProllyGeek

這是做這件事：

function focus() 
{ 
    var iframe = document.getElementById('iframe-element') 
    iframe.contentWindow.focus(); 
} 

window.setInterval(focus, 100);

或jQuery的：

$("body").click(function(){ 
    $('#iframe-element').focus(); 
});

這需要過程的主網頁上運行，因爲允許嵌入的iframe來偷焦點而不是瀏覽器/網頁安全的性質。

祝你好運。

來源

2014-05-12 09:47:34

請參閱問題評論。 –

這不是一個完整的解決方案，但一個想法....

有關捕獲網站上的所有鍵盤事件，然後決定（例如，通過檢查iframe中的一些無形的輸入/元素的值），如果一場比賽正在進行中。如果是，該行動的preventDefault並引發一些自定義事件的iframe中，也將讓你的遊戲聽太多的自定義事件......

其實我剛剛發現這一點： Access elements of parent window from iframe 您可以申請我的解決方案，這樣從iframe內，並檢查是否有點擊/按鍵其父

問候

來源

2014-05-16 04:20:54 user3567992

這是因爲瀏覽器的安全功能通常不太可能稱爲同源-政策。 1

基本上，一個域上的一個頁面不能與另一個頁面的事件進行交互或截取，因爲它會帶來安全風險。想象一下，爲用戶的銀行賬戶開放一個框架，然後捕獲他們在該框架中完成的按鍵操作 - 顯然這將是一件非常糟糕的事情（tm）。它也可以用其他方式工作，框架的內容不能在父頁面上看到事件，除非它們在同一個域中。

現在，瀏覽器仍然希望允許您與框架內的內容交互。所以當你開始與一個幀的內容進行交互時，另一個幀就會失去對發生什麼事情的意識。

所以，畢竟，你可能仍然想知道如何解決你的問題。這裏有幾個很好的選擇。

不是將您的遊戲加載到iframe中，而是讓用戶將其嵌入到當前頁面中。你可以讓他們通過向遊戲提供代碼並讓它們放置在頁面中，或者通過提供一個腳本標記來從你自己的服務器加載代碼並將遊戲放入其頁面中。
使用跨文檔消息傳遞2，一個相對較新的瀏覽器功能，允許頁面繞過正常的同源策略限制。基本上，使用Cross Document Messaging，您可以在發送事件到iframe中的頁面的父頁面上運行javascript。

來源

2014-05-17 02:13:53 Gdeglin

在我看來，雖然禁止跨域iframe通信的安全性很好，但它也沒用，因爲惡意網站可能只是代理和欺騙您的網站 –

雖然這是真的，但這會更糟，因爲用戶可能已經記錄進入框架內的網站，因此感到安全輸入更多的敏感信息，或看到有效的「安全圖像」（如一些銀行網站使用）的登錄提示。但無論如何，同樣的原始策略也被用來防止其他類型的跨域交互，例如，可以用於xss或會話劫持。 – Gdeglin

iframe如何捕捉像閃光燈一樣的鍵盤？

回答

相關問題