如果我单击“搜索”按钮，我想通过类搜索来提醒两个链接(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);
});
最佳答案
要访问 iframe 的内容，请使用以下命令:
var iframe = document.getElementById('messageiframe');
var innerDoc = iframe.contentWindow.document;
从文档内部根据类或ID使用过滤掉.getElementsByClassName()或.getElementsById()功能。这里我们使用，
innerDoc.getElementsByClassName("search")
然后使用过滤后的对象列表，并使用 JQuery 根据需要使用它们。瞧，警报正在工作!
在此处查看工作解决方案:JSFiddle
请注意，问题中存在一些错误，例如直接在 iframe 中包含代码。使用srcdoc iframes 的属性。它们已在解决方案 Fiddle 中得到纠正。但由于您使用的是另一个文件中的 html，因此无需对此进行更多思考。
关于javascript - iframe 内具有特定类的警报链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45005274/