Question

我的代码如下所示。

<!DOCTYPE html>
<html>

  <head>
    <title>TODO</title>
  </head>

  <body>
    <div id="btn">
      <button id="clickme">Click Me</button>
    </div>
    <div class="iframebox">
      <iframe id="messageiframe">
        <html>

        <head>
          <title>test</title>
        </head>

        <body>
          <div id="textpreview">
            <p id="pre">some text</p>
          </div>
        </body>

        </html>
      </iframe>
    </div>
  </body>

</html>

我正在尝试使用jQuery在iframe中定位id="textpreview"。我可以成功定位iframe外的任何ID，但无法定位iframe内部。

我的jQuery代码是：

$('#clickme').on('click', function() {
  if ($("#textpreview").length > 0) {
    alert("success");
  }
});

我怎样才能做到这一点？

提前致谢。

Answer 1

使用“contents（）”

$("#messageiframe").contents().find("#textpreview")

https://api.jquery.com/contents/

Answer 2

<!DOCTYPE html>
<html>

  <head>
    <title>TODO</title>
  </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <body>
    <div id="btn">
      <button id="clickme">Click Me</button>
    </div>
    <div class="iframebox">
      <iframe id="messageiframe">
        <html>

        <head>
          <title>test</title>
        </head>

        <body>
          <div id="textpreview">
            <p id="pre">some text</p>
          </div>
        </body>

        </html>
      </iframe>
    </div>
  </body>
<script>

$('#clickme').on('click', function() {

  if ($("#textpreview").has("pre")) {
    alert("success");
  }
});
</script>
</html>

检查是否有id。

iframe内部的jQuery目标ID和警报

2 个答案: