Question

我正在尝试在iframe中找到焦点项但却失败了！

每当我插入iframe时，项目似乎都是聚焦的，例如，如果我插入一个表格，那么光标总是在最后一个单元格中。

作为一个I测试，我试图更改单元格的背景颜色以查看它是否正常工作，但这总是会更改iframe主体而不是插入的项目

var d1 = $.Deferred();

$.when(d1).then(function () {                
    var $iframe = $("#ifr").contents();
    var focused = $iframe.find(':focus');
    focused.css("background", "red");
    console.log(focused);
})

d1.resolve(insertTable(html));

d1只是调用一个函数，它使用execCommand（）插入iframe。

是否可以找到聚焦元素并将其存储在此方法中？

Answer 1

The body element is the fallback if no other element has focus：

可能没有关注的元素;当没有元素被聚焦时，文档接收的关键事件必须以body元素为目标，如果有，[...]用户代理可以支持每个顶级只有一个聚焦元素浏览上下文 - 用户代理应遵循这方面的平台约定。

另见the CSS :focus selector。您的问题是整个浏览上下文中只有一个元素可以具有焦点。如果焦点不在iframe范围内，则它位于其他位置，并且iframe的{{1}}元素就是后备。

https://www.w3.org/TR/html5/browsers.html#nested-browsing-context表示body是嵌套浏览上下文，而不是顶级浏览上下文。所以似乎整个页面只有一个聚焦元素。如果不在iframe范围内，则会返回其iframe。

Answer 2

将此脚本放在iframe页面中。

$("body").delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});

示例iframe页面是 -

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
        .focused {background: #F00;}
    </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="#">
  First name:<br><input type="text" name="firstname" value="Mickey" >
  <br>
  Last name:<br><input type="text" name="lastname" value="Mouse">
  <br><br><input type="submit" value="Submit">
</form> 

<script>
$("body").delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});
</script>
</body>
</html>

在iframe中查找重点项目

2 个答案: