Question

如果点击“搜索”按钮，我想用类搜索提醒两个链接（内部iframe）。

如何使用jQuery实现这一目标？

这是我的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="btn-search">Search</button>
    </div>
    <div class="iframebox">
      <iframe id="messageiframe">
       #document

        <!DOCTYPE html>
        <html>

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

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

          <div id="preview">
            <ul id="list">
              <li class="mail"><a href="https://mail.gmail.com">Gmail</a></li>
              <li class="search"><a href="https://www.google.com">Google</a></li>
              <li class="mail"><a href="https://mail.outlook.com">Outlook</a></li>
              <li class="search"><a href="https://www.bing.com">Bing</a></li>

            </ul>
          </div>
        </body>

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

</html>

这是我尝试过的jQuery代码，但它无效：

$('#btn-search').on('click', function() {
  var links = [];
  var t = $("#messageiframe").contents().find("#preview");
  var link = '';
  t.find('li.search').children('a').each(function() {
    link += $(this).text();
  });
  links.push(link);
  alert(links);
});

和JSFiddle

Answer 1

要访问iframe的内容，请使用以下命令：

var iframe = document.getElementById('messageiframe');
var innerDoc = iframe.contentWindow.document;

在文档中根据类或ID过滤掉使用.getElementsByClassName()或.getElementsById()函数。我们在这里使用，

innerDoc.getElementsByClassName("search")

然后使用已过滤的对象列表，并根据需要使用JQuery。瞧，警报正在发挥作用！

请在此处查看解决方案：JSFiddle

请注意，问题中存在一些错误，例如直接包含iframe中的代码。使用iframes的{{3}}属性。他们已经在解决方案小提琴中得到了纠正。但是，由于您正在使用其他文件中的html，因此无需再考虑更多内容。

iframe中具有特定类的警报链接

1 个答案: