將iframe中的html文件的元素添加到原始文件的DOM樹中

Question

我有一個包含iframe的test.php文件，當click按鈕click時，該文件將從iframe.html獲取其源代碼。

但是我想在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 個解決方案

解決方案1
2 已采納 2017-01-15 19:44:30

將iframe中的html文件的元素添加到原始文件的DOM樹中

問題描述

1 個解決方案

解決方案1 2 已采納 2017-01-15 19:44:30

解決方案1
2 已采納 2017-01-15 19:44:30