使用 jQuery 在 iframe 中选择 div

Question

我正在尝试 select div 在带有 jQuery 的 iframe 中。但我无法让它工作。有什么建议吗？

父级 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="css/style.css" />
    <title>Selector</title>
</head>
<body>
    <iframe src="https://[sameDomainAsParent]/selector/template.html" id="selectorFrame"></iframe>
    <script>
        $("#selectorFrame").contents().find("#name").css("border", "2px solid red");
    </script>
</body>
</html>

iframe HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.template.css">
    <title>Template</title>
</head>
<body>
    <div id="logo"></div>

    <div id="color"></div>
    <div id="name">Name</div>
    <div id="title">Title</div>
</body>
</html>

Answer 1

我找到了解决方案。我需要等待加载 iframe。所以最终的 jQuery 脚本将是：

$(function() {
   $("#selectorFrame").bind("load",function(){
      $("#selectorFrame").contents().find("#name").css("border", "2px solid green");
   });
});

使用 jQuery 在 iframe 中选择 div

Selecting div inside iframe with jQuery

iframe

jquery