如何在iFrame中保持对输入的关注

Question

我有多个php页面用于特定的SQL表操作。这些可以通过另一个带有iFrame及其各种链接的页面访问。

所以第1页看起来是这样的：

<nav>
<ul>
<li class="cat1">
<a href="#"  onClick="page.location.href = 'page2.php' ; document.getElementById('page').style.height='880px';">Read</a>
</li>
</ul>
</nav>
<iframe id="page" name="page" width="100%" style="background-color:#FFFFFF" frameborder="0"  marginwidth="0" marginheight="0" scrolling="no"></iframe>

第2页是这样的：

首先在头上写一个脚本：

<script>
function submitter(){
document.getElementById('form1').submit();
document.getElementById('scan').focus();
}
</script>

机身：

<form  action="" method="post" enctype="multipart/form-data" name="Formular" id="form1">
<input type="text" name="scan" id="scan" style="border-radius:8px; border-color:#000000;" autofocus autocomplete="off" onChange="submitter()">

page2的操作方法是读取条形码，将其写入文本输入并提交SQL查询。我想把重点放在文本输入上，因为我想每天点击大约100次。当我单独打开page2但不在iFrame中时，我的脚本可以工作。

关于如何将光标保持在输入中，有什么线索吗？

编辑

到目前为止，在查看了addEventListener之后，我将以下脚本添加到了第1页：

var iframe = document.getElementById('page');
iframe.contentWindow.body.addEventListener('submit', function(evt){
evt.preventDefault();
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
innerDoc.getElementByID('scan').focus();
});

但这不起作用。这对我来说可能只是一个误解，但我希望能得到一些帮助。

Answer 1

在第二页上，您可以添加：

window.addEventListener('DOMContentLoaded', (event) => {
// assuming you're having different HTML file for each page.
// when this page is loaded, it will focus elemen with id scan
document.getElementById('scan').focus();
});