javascript - 使用 jQuery 处理 html5 iframe 内的用户点击

标签 javascript jquery html iframe

我正在尝试在已经投入使用的网站上展示一项新功能。因此,我使用 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/

相关文章:

javascript - jquery JSON 不从 jQ AJAX 请求解析

javascript - 为什么javascript绑定(bind)不起作用

Drupal 7 FAPI ajax 和 jquery 提交事件

javascript - 使用文本字段中的值更新隐藏表单字段

html - 在所有设备上正确显示表格

javascript - 如何使用javascript获取一行表中的单元格值?

javascript - jQuery ui-datepicker-trigger 错误 : 'J.inline' is null or not an object (happens on Mouseover)

c# - 如何使用javascript检查插入的行是否是新插入到gridview控件中的?

jquery - 直接单击复选框时,复选框不会更改

html - 用于覆盖图像和 css 模糊的标记和样式