如何专注于 iFrame 中的输入答案

【问题标题】：How to keep focus on an input in an iFrame如何专注于 iFrame 中的输入
【发布时间】：2021-06-03 13:47:43
【问题描述】：

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

所以 page1 看起来像这样：

<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>

page2 如下所示：

头上先写一个脚本：

<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 之后，我将以下脚本添加到 page1：

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

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

【问题讨论】：

您对父文档和 iFrame 的源代码都有控制权吗？ developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 是通过 javascript 在 iframe 和父文档之间进行交互的好方法，您可以编写一个函数，向子 iframe 发送一条消息，告诉它执行各种功能，包括“焦点输入”功能等
@Scuzzy 首先感谢您的回复。如果我理解正确，我可以向 page1 添加一个 EventListener，它会监听提交，然后将带有 GetElementById().focus() 的 postMessage 发送到 page2，对吗？
没错，它是一个事件驱动的通信 API。但会发送一个对象结构命令其他页面运行各种任务。

标签： javascript php html iframe

【解决方案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();
});

【讨论】：