使用jQuery检测Chrome中的iframe（同一域/子域）内部的点击 [英] Detect click inside iframe (same domain/sub domain) in Chrome using jQuery

问题描述

这个问题已经被问了很多，答案通常是相似的。

This question has been asked a lot, and the answers are usually similar.

基本来说，我需要一个函数来执行iframe的内容是点击。

In basic terms, I need a function to perform when the contents of an iframe are clicked.

为了演示的目的，我有 http ：//mydomain.com/iframe.html ，其中包含ID为iframeID的iframe和 http： //mydomain.com 。

For the purposes of this demonstration, I have http://mydomain.com/iframe.html which contains an iframe with an ID of "iframeID" and a source of http://mydomain.com.

此代码有效：

jQuery(document).ready(function(){
    $('#iframeID').contents().click(function(event) {
        console.log('Clicked! ' + event.pageX + ' - ' + event.pageY);
    });
});

但是，此代码仅适用于Internet Explorer。我需要一个适用于所有浏览器的解决方案。

But, this code only works in Internet Explorer. I need a solution that will work in all browsers.

好消息是，这些都在同一个域上，所以如果我需要在iframe中添加其他代码来源或我的iframe.html然后那没关系。我只是需要它来跨浏览器工作。

The good news is, this is all on the same domain so if I need to put additional code in either the iframe source or my iframe.html then that's fine. I just need it to work cross-browser.

另外需要注意的一点是，我希望这可以跨子域工作。

One other point to note, is I have a desire for this to work across subdomains.

我知道它不适用于不同的域名，但据我了解，子域名应该没问题？这需要额外的步骤吗？

I know it won't work with different domains, but as I understand it, subdomains should be fine? Any extra steps required for that to work?

感激不尽的任何帮助！

推荐答案

以下是我在jsFiddle上汇总的示例，演示了使用XDM的一种方法：
这是演示，它包括作为儿童iframe的小提琴

Here is an example I've put together on jsFiddle that demonstrates one way to use XDM: This is the demo and it includes this fiddle as a child iframe

HTML（父母）：

<h1>Parent window</h1>
<input id="message-for-child" type="text" value="" placeholder="(message for child)">
<button id="parent-to-child-button">Send to child</button>
<br>
<p id="parent-message"></p>
<br>
<iframe id="child" src="http://fiddle.jshell.net/quant/G2uq6/show/"></iframe>

JavaScript（父母）：

JavaScript (parent):

// parent_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).
function parent_on_message(e) {
    console.log("parent_on_message event fired: ", e);
    // You really should check origin for security reasons
    // https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
    if (e.origin.search(/^http[s]?:\/\/.*\.jshell\.net/) != -1
        && !($.browser.msie && $.browser.version <= 7)) {
        var returned_pair = e.data.split('=');
        if (returned_pair.length != 2)
            return;
        if (returned_pair[0] === 'message-for-parent') {
            $("p#parent-message").html(returned_pair[1]);
        }
        else
            console.log("Parent received invalid message");
    }
}

jQuery(document).ready(function($) {
    // Setup XDM listener (except for IE < 8)
    if (!($.browser.msie && $.browser.version <= 7)) {
        // Connect the parent_on_message(e) handler function to the receive postMessage event
        if (window.addEventListener)
            window.addEventListener("message", parent_on_message, false);
        else
            window.attachEvent("onmessage", parent_on_message);
    }


    $("button#parent-to-child-button").on("click", function(e) {
        console.log("Sending: " + $("input#message-for-child").attr("value"));
        $("iframe#child").get(0).contentWindow.postMessage('message-for-child=' + $("input#message-for-child").attr("value"), '*');

    });


});

HTML（子）：

<h1>Child</h1>
<input id="message-for-parent" type="text" value="" placeholder="(message for parent)">
<button id="child-to-parent-button">Send to parent</button>
<br>
<p id="child-message"></p>

JavaScript（孩子）：

JavaScript (child):

// child_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).
function child_on_message(e) {
    console.log("child_on_message event fired: ", e);
    // You really should check origin for security reasons
    // https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
    if (e.origin.search(/^http[s]?:\/\/.*\.jshell\.net/) != -1
        && !($.browser.msie && $.browser.version <= 7)) {
        var returned_pair = e.data.split('=');
        if (returned_pair.length != 2)
            return;
        if (returned_pair[0] === 'message-for-child') {
            $("p#child-message").html(returned_pair[1]);
        }
        else
            console.log("Child received invalid message");
    }
}

jQuery(document).ready(function($) {
    // Setup XDM listener (except for IE < 8)
    if (!($.browser.msie && $.browser.version <= 7)) {
        // Connect the child_on_message (e) handler function to the receive postMessage event
        if (window.addEventListener)
            window.addEventListener("message", child_on_message , false);
        else
            window.attachEvent("onmessage", child_on_message );
    }


    $("button#child-to-parent-button").on("click", function(e) {
        console.log("Sending: " + $("input#message-for-parent").attr("value"));
        parent.window.postMessage('message-for-parent=' + $("input#message-for-parent").attr("value"), '*');

    });


});

进一步阅读：

• XDM教程


• XDM信息


• XDM安全性＃1


• XDM安全＃2

• XDM tutorial
• XDM info
• XDM security #1
• XDM security #2

这篇关于使用jQuery检测Chrome中的iframe（同一域/子域）内部的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！