Javascript DOM 向 iframe 中嵌入的函数发送值以模拟按键

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 按键事件：

Live demo (click).

主页：

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);
});