Question

我需要通过将鼠标悬停在元素上来获取iframe内的元素，例如，如果iframe内的按钮可用，则意味着我需要获取button元素。

我已经使用查询选择器（：hover）来获取悬停的元素，但是我只能从顶部文档中将这些元素获取到iframe。我无法将元素放入iframe中。

有人遇到吗？

Answer 1

它受CORS的限制（因此，通常您不能以这种方式观察来自第三方网站的小部件），但是在其他最新的浏览器中也可以使用，您只需使用contentWindow iframe，甚至可以使用elementFromPoint()。

示例frame.html：

<div>Test1</div>
<div>Test2</div>
<div>Test3</div>
<div>Test4</div>
<div>Test5</div>

并包含test.html：

<!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script>
      function startup(){
        frame.contentWindow.document.addEventListener("click",function(event){
          frame.contentWindow.document
            .elementFromPoint(event.clientX,event.clientY).innerHTML+="!";
        });
      }
    </script>
  </head>
  <body onload="startup()">
    <iframe id="frame" width="300" height="200" src="frame.html"></iframe>
  </body>
</html>

单击iframe的元素，其内容将带有感叹号。

如何通过将iframe悬停在iframe中动态获取元素

1 个答案: