Question

如何从iframe中删除制表位？我的iframe在同一个域中。

我尝试过以下代码：

   var objIFrame = document.getElementById('my_iframe');
   if (objIFrame != null) {

   objIFrame.setAttribute('tabindex', '-1');

但我仍然专注于iframe。

Answer 1

iFrame确实不支持标签或选择，它通常是iFrame中可选择的文档或正文。尝试类似：

var objIFrame = document.getElementById('my_iframe');
    objIFrame.contentDocument.setAttribute('tabindex', '-1');
    objIFrame.contentDocument.getElementsByTagName('body')[0].setAttribute('tabindex', '-1');

Answer 2

我研究了Stripe Elements as an example来弄清楚这一点-他们使用<iframes>来收集信用卡号，并在所有字段中使用顺滑的铃声。

没有对我进行任何设置tabindex的原因，因此我选择使用JavaScript进行设置。我通过侦听<iframe>的窗口以进行聚焦来解决它，然后将该聚焦重定向到我想要的元素上。这要求您控制<iframe>的内容。

window.addEventListener('focus', function() {
  document.getElementById('myInput').focus();
})

这是一个例子：

index.html

<html>
  <body>
    My input
    <input type="text" />
    <iframe src="https://www.example.com/iframe.html" />
  <body>
</html>

iframe.html

<html>
  <body>
    More inputs
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <script>
      window.addEventListener('focus', function() {
        document.getElementById('myInput').focus();
      })
    </script>
  <body>
</html>

我注意到这种行为是Internet Explorer 11和Firefox 76所独有的，但是并没有影响Chrome 81或Edge 81。

如何从iframe中删除制表位？

2 个答案: