Question

我正在尝试使用 iframe对象和 jQuery 访问特定元素（可能更类似于此），但它无效。

iframeWindow对象非空，但下一个语句似乎不起作用。我在这个答案上看到了类似this的内容，但它不起作用。我做错了吗？

这是我的代码：

RADIO.PHP

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>

        $(document).ready(function(){
            setTimeout(function(){
            var iframe= document.getElementById("iframe");
            var iframeWindow = iframe.contentWindow;
            var text=iframeWindow.$("div:nth-child(3) .c2").html();
            console.log(text);

            //DOESN'T PRINT "INNER MOST"

        }, 1000);

    });
    </script>
</head>
<body>
  <div class="c1">
  <iframe id="iframe" src="api.php" height="200" width="300">
  </iframe>
  </div>
</body>
</html>

API.PHP

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body id="abody">
Hey
    <div class="c1"></div>
    <div class="c1">
        <p class="c2"></p>
    </div>
    <div class="c1">
        <p class="c2">
         INNER MOST
        </p>
    </div>
</body>
</html>

编辑：我已经纠正了语法错误。

Answer 1

您应该将iframe.contentWindow.document代替iframe.contentWindow与find()和text()结合使用，它应该有效。试试这个：

$(document).ready(function() {
  setTimeout(function() {
    var iframe = document.getElementById("iframe");
    var iframeWindow = iframe.contentWindow.document;
    var text = $(iframeWindow).find(".c1:nth-child(3) .c2").text();
    console.log(text);

    //PRINTS "INNER MOST"

  }, 1000);

});

根据 MDN 文档说明：

contentWindow 属性返回 iframe 元素的 Window 对象。您可以使用此Window对象访问iframe的文档及其内部 DOM 。此属性是只读的，但其属性可以像全局Window对象一样进行操作。

您可以详细了解iframe元素及其工作原理 here 。

Answer 2

显而易见的是，我和其他所有人都错过了错字，而不是inframeWindow应该是iframeWindow。

而是尝试使用jquery选择器：

var text=$(iframeWindow).find("div:nth-child(3) .c2").html();

您正在将jquery方法附加到DOM对象。不能以这种方式完成。你必须使它成为一个jQuery对象来分配一个jQuery方法。

Answer 3

要在jQuery中为选择器指定范围，请将范围作为第二个参数传递给jQuery选择器。

替换：

inframeWindow.$("div:nth-child(3) p .c2")

与

$("div:nth-child(3) p .c2", inframeWindow)

（另外，DOM或jQuery对象上没有$成员函数。）

Answer 4

尝试这种方式希望它会有所帮助

更新了答案

var $iframe= $("#iframe");
var $iframeWindow = $iframe.contents();
var text=$iframeWindow.find("div").eq(2).find('p .c2').html();
console.log(text);

为什么我不能使用iframe对象和jQuery遍历这个元素？

4 个答案: