Javascript DOM將值發送到iframe中嵌入的函數來模擬keypress

Question

我有一個測試，我一直在努力，嘗試將值發送到iframe中定義的函數（來自同一來源的兩個頁面）。 處於焦點時iframe的內容響應某些擊鍵。 我想要實現的是通過主頁面上的按鈕從iframe觸發那些按鍵操作。

iframe的內容是動態的，需要在沒有刷新的情況下運行，否則我知道我可以更改iframe src來攜帶變量。 到目前為止我有什么......

父頁面：

<!DOCTYPE html><html><head>
<style>
  iframe{border:1px solid blue;height:100px;width:100px;margin:20px auto 0 auto;}
</style>
</head><body>
<iframe id="iframe" src="iframetest2.html"></iframe>
<button onclick="simKey(32);">CLICK</button>
<script>
  var iframe=document.getElementById('iframe');
  var ifContent=iframe.contentWindow
  function simKey(x){
    ifContent.postMessage(testScript(x),'*','[transfer]');
  }
</script></body></html>

和iFrame內容：

<!DOCTYPE html><html><head>
<script>
  function testScript(x){
document.body.innerHTML=x;
setTimeout(function(){document.body.innerHTML='';},700);
  }
  </script></head><body onkeypress="testScript(event.keyCode)"></body></html>

我也試圖盡可能避免使用jQuery。 這是一個概念網頁設計，真的很想手工編寫Javascript，以便我可以根據需要進行修改。

Answer 1

首先，內聯js（比如你的html中的onkeypress ）是一種不好的做法。 閱讀以下一些結果： https ： //www.google.com/search？q = Why +is + inline + js + bad％3F

我將使用最佳實踐addEventListener 。

從父窗口上的按鈕觸發iFrame按鍵事件：

現場演示（點擊）。

主頁：

var myBtn = document.getElementById('myBtn');
var iframe = document.getElementById('myIframe');

myBtn.addEventListener('click', function() {
  var evt = new Event('keypress');
  evt.keyCode = '115';
  iframe.contentDocument.body.dispatchEvent(evt);
});

的iFrame：

document.body.addEventListener('keypress', function(e) {
  console.log(e.keyCode);
});

如果您需要支持舊瀏覽器或需要更多信息，以下是一些可能對您有幫助的文檔： https ： //developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

舊答案：這會偵聽父窗口上的按鍵。

在iFrame中，您只需要擁有此JavaScript：

window.parent.document.body.addEventListener('keypress', function(e) {
  console.log(e.keyCode);
});

Javascript DOM將值發送到iframe中嵌入的函數來模擬keypress

問題描述

1 個解決方案

解決方案1
3 已采納 2014-01-10 20:06:42

從父窗口上的按鈕觸發iFrame按鍵事件：

舊答案：這會偵聽父窗口上的按鍵。

Javascript DOM將值發送到iframe中嵌入的函數來模擬keypress

問題描述

1 個解決方案

解決方案1 3 已采納 2014-01-10 20:06:42

從父窗口上的按鈕觸發iFrame按鍵事件：

舊答案：這會偵聽父窗口上的按鍵。

解決方案1
3 已采納 2014-01-10 20:06:42