我需要监控用户何时点击 iframe 的链接并检索点击的 URL。到目前为止，我已经看到了用于检测 iframe 内点击的信息，但没有看到用于检索在该 iframe 内被点击的 a 标签的信息。这可能吗？
【问题讨论】：
window.top.onIframeLinkClick(url) 将其传递到顶部窗口，前提是顶部窗口具有函数 onIframeLinkClick 的定义
标签： javascript iframe
这是一个示例代码，用于检索 iframe 被点击的锚元素的 url 到顶部窗口。
Page.html内容<body>
<iframe src="./iframe.html" frameborder="1"></iframe>
<script>
function onLinkClick(url) {
// iframe document can access this method with `window.top` namespace
alert('URL from iframe: ' + url);
}
</script>
</body>
iframe.html内容<body>
<a href="https://www.google.com/">Google</a>
<a href="https://in.yahoo.com/">Yahoo!</a>
<script>
document.addEventListener('click', function (e) {
if (e.target.tagName.toLowerCase() == "a") {
// Stop redirection for demo
e.preventDefault();
try {
// Pass the url to `window.top.onLinkClick`
window.top.onLinkClick(e.target.href);
} catch (ex) {
alert('error: ' + ex.message);
}
}
});
</script>
</body>
在Node.js 包http-server 的帮助下使用http:// 协议测试了此示例，该包从本地文件夹启动服务器。
通过以下命令全局安装http-server：
npm i -g http-server
打开命令提示符，导航到提取测试文件的文件夹并运行http-server。
在浏览器中打开http://localhost:8080/page.html并测试这个例子。
注意：当通过
ftp://打开时，该操作被阻止并带有异常Blocked a frame with origin "null" from accessing a cross-origin frame.
【讨论】：
ReadMe.md 中找到我的演示here 提供的详细信息。还更新了我的答案的详细信息