为iFrame添加事件监听器

Question

为iFrame添加事件监听器

16

我试图在iframe对象内添加mouseup事件监听器：

$("#myIFrame").contents().find("body").bind("mouseup", function() {
    //e.preventDefault(); //doesn't make difference
    alert('inside');
});

这不起作用。有什么想法吗？

- Darko Martic

在iFrames中绑定事件可能会有问题，因为这样做有时会捕获本身被IFRAME托管的内容所用的事件；不同的浏览器对此的处理方式各不相同。 - David W

这会给你什么？--> alert（$（“＃myIFrame”）.contents（）。find（“body”）。length） - Dhaval Marthak

iFrame 当然显示的是来自相同域名、相同端口和协议的页面？ - adeneo

@adeneo 是的，同一域名/端口/协议。 - Darko Martic

@DhavalMarthak 好的，它没有 :) 我不会得到 alert('inside'); - Darko Martic

显示剩余2条评论

6个回答

10

这将起作用：

 $('#myIFrame').load(function(){
     //then set up some access points
     var contents = $(this).contents(); // contents of the iframe
     $(contents).find("body").on('mouseup', function(event) { 
         alert('test'); 
     });
 });

- Muhammad Bilal

3

iframe.contentWindow

const iframe = document.getElementById('iframeId');
iframe.contentWindow.body.addEventListener('click',() => console.log('click'));

注意跨源策略

只有相同来源的框架才允许事件冒泡。否则，您将会遇到以下错误（在Chrome中）：

Blocked a frame with origin "http://example.com" from accessing a cross-origin frame

- Andrii Verbytskyi

谢谢！你的方法完美地运行了，但是我不得不使用“contentDocument”而不是“contentWindow”。iframe.contentDocument.body.addEventListener('click', () => console.log('click')); - user1298923

8

那么我们如何处理跨域访问的问题？ - Mohamed Ali

2

请在Chrome上尝试此操作，已测试可行。

据我所知，Iframe必须来自同一域名。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>

    <script type='text/javascript'>
        $(window).load(function () {            
            var $frame = $("#myIFrame");
            $frame.contents().bind("mouseup", function (e) {
                alert('inside');
            });
        });
    </script>
</head>
<body>
    <iframe id="myIFrame" src="/WebForm4.aspx" style="position:absolute; width:500px; height:500px;left:0px; top:50px"></iframe>
</body>
</html>

- Maddy

1

由于jsfiddle将该脚本标记为CDATA，所以它在jsfiddle上无法运行。请尝试在您的本地机器上运行此脚本。 - Maddy

1

$($("#iframeid").contents()[0], window).find('body').bind("mouseup", function(e) {
    alert("works");
});

尝试这个。在 jsfiddle 中可用。享受。

- wast

0

为了给您的iframe提供触发事件，有一种替代方法：将iframe包裹在div内，并为该div设置onClick事件。因此，在div被点击时，您可以在iframe上触发事件。

- Roop Kadam

2

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vince Pike · Accepted Answer

如果你只想使用纯粹的Javascript方式，你可以使用以下方法：

var iframe = document.getElementById('myIFrame');
iframe.contentDocument.body.addEventListener('mouseup', Handler);

function Handler() {
    alert('works');
}