在 iframe 中查找重点项目答案

【问题标题】：Finding focused item in iframe在 iframe 中查找重点项目
【发布时间】：2017-05-03 12:13:09
【问题描述】：

我试图在 iframe 中找到焦点项目但失败了！

每当我在 iframe 中插入项目时，该项目似乎都是焦点所在，例如，如果我插入一个表格，则光标始终位于最后一个单元格中。

作为我的测试，我正在尝试更改单元格的背景颜色以查看它是否正常工作，但这总是会更改 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 中。

是否有可能找到焦点元素并将其存储在此方法中？

【问题讨论】：

因为在 iframe 加载时没有被聚焦的元素（除了 iframe 本身）。首先你需要让一些元素成为焦点，然后只有你能得到这些元素。
插入表格时，光标在其中一个单元格内处于活动状态，因此必须聚焦或激活某些内容？表格调整大小处理程序也处于活动状态
您能否添加一个小提琴示例，以便了解您面临的问题
也许您可以尝试使用Window.postMessage() 解决这个问题。有了这个，您可以将事件从 iframe 发送到父级。因此，当某些内容在 iframe 中聚焦时，您可以从 iframe 与父级对话。请参阅此处的文档：link

标签： jquery html iframe

【解决方案1】：

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

可能没有元素聚焦；当没有元素被聚焦时，文档接收到的关键事件必须针对 body 元素，如果有，[...] 用户代理 [...] 可能支持 每个顶层仅一个聚焦元素浏览上下文——用户代理在这方面应该遵循平台约定。

另见the CSS :focus selector。您的问题是整个浏览上下文中只有一个元素可以拥有焦点。如果焦点不在iframe 内，则它在其他地方，而iframe 的body 元素就是那个后备元素。

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

【讨论】：

【解决方案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>

【讨论】：