我正在尝试在已经投入使用的网站上展示一项新功能。因此,我使用 iframe 将此网站加载到我的开发服务器中,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe id="myframe" src="https://production_website.com" style="border:none;" width="100%" height="600" seamless></iframe>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
console.log($("#myframe").contents());
$("#myframe").contents().find(".importantContent").click(function(){
console.log($(this));
});
</script>
</html>
我试图拦截用户对 iframe 区域中特定 DOM 元素的点击,基于此我将注入(inject)特定的 HTML 内容来演示功能。但是用 jquery click() 监听不起作用。
有什么建议吗?
我知道同源策略限制,但对于无法控制服务器的网页设计师/开发人员来说,是否有解决方法,例如使用插件禁用该限制?
示例:https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
最佳答案
我在另一个线程中找到了这个答案,看起来它可能对你有用。尝试:
$('#myframe').load(function(){
var iframe = $('#myframe').contents();
iframe.find(".importantContent").click(function(){
alert("test");
});
});
此外,您有 $("#reco").contents() 而不是 $("#myframe").contents(),您是否打算不使用此示例中的 iframe?
关于javascript - 使用 jQuery 处理 html5 iframe 内的用户点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39898988/