Question

我的test.php文件包含iframe，当点击按钮iframe.html时，iframe会从click获取来源。

但是我想在iframe（iframe.html）中的文件元素上应用一些javascript代码，但没有发生任何事情，这是我的代码：

tesp.php文件：

<html>
<head>
    <title>test</title>
</head>
<body>
<input type="button" value="Click" id="fill_iframe"/>
<br>
<iframe id="iframe" src="" style="width: 200px; height: 100px">hello</iframe>
<br>
<div class="front">
    <a href="#">outside frame</a>
</div>
<br>
<input type="button" value="change color" id="log"/>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
    $("#fill_iframe").click(function () {
    $("#iframe")[0].src = "iframe.html";
    });
    $("#log").click(function () {

    $('.front a').css('color', 'red');
    console.log($("#iframe"));
    });

</script>
</body>
</html>

和iframe.html文件：

<html>
   <head>

    </head>
   <body>
      <div class="front">
        <a href="#">inside frame</a>
      </div>

   </body>
</html>

单击change color按钮时，仅更改外部链接。

当我使用console.log($("#iframe"));时，它没有孩子？那是为什么？

我错过了什么？

我甚至尝试使用$("#iframe").load("iframe.html");没有改变

提前致谢：）

Answer 1

您需要进入iframe文档。在jQuery中，您可以使用

执行此操作

jQuery("#iframe").contents().find(".front a").css("color", "red");

将iframe中的html文件元素添加到原始文件的DOM树中

1 个答案: