使用jQuery检测Chrome中iframe（相同域/子域）内的点击

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

基本上，我需要在单击iframe的内容时执行一个函数

出于本演示的目的，我有一个包含一个ID为“iframeID”的iframe和一个源

此代码适用于：

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

但是，此代码仅在Internet Explorer中有效。我需要一个解决方案，将在所有浏览器工作

好消息是，这些都在同一个域上，所以如果我需要在iframe源代码或iframe.html中添加额外的代码，那就好了。我只需要它跨浏览器工作

另一点需要注意的是，我希望它能够跨子域工作

我知道它不能用于不同的域，但据我所知，子域应该可以吗？需要额外的步骤吗

---

感谢您的帮助

下面是我在JSFIDLE上编写的一个示例，演示了使用XDM的一种方法： 它包括

HTML（父级）：

父窗口 送给孩子

JavaScript（父级）：

//父消息（e）将处理postmessage（又称跨文档消息或XDM）的接收。
函数父函数关于消息（e）{
log（“触发的父消息事件：”，e）；
//出于安全原因，您确实应该检查来源
// https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
如果（e.origin.search（/^http[s]？：\/\/.*.jshell\.net/）！=-1
&&！（$.browser.msie&&$.browser.version如果您只想使iframe中的链接在顶部窗口中打开，而不是在iframe签出的内部

只需在iframe HTML的头部添加以下内容：

<base target="_parent" />


正在使用跨文档消息传递（XDM）一个选项？它适用于IE8和更新版本以及所有现代浏览器。如果您需要对旧浏览器的支持，您可以查看：另请参阅：看起来值得探索。我不完全理解它，但示例代码是我可以使用的。IE8+很好-他们在IE8之前制造浏览器？：-P如果您有基于原始代码的实用示例我贴了一个例子。我没有分析你的原始代码，但我试着让它变得非常通用和易于修改。希望这是一个有用的很棒的工作。我真的非常感谢你…我真的不能。我没有足够的代表投票，但我会尝试一下，让它更符合我的需要，如果我没有其他问题的话ons我将在最容易的机会将此标记为答案。我很高兴您喜欢它！但标准的警告语仍然适用：永远不要将SO答案作为了解底层技术的替代品。此代码没有任何形式的保证或保证：）当然。我从中学到了很多东西。无论是我问的问题，还是我通过搜索找到的答案。这是一个很棒的地方，像你这样的人放弃了时间来提供伟大的答案，这让我变得很棒。我会从中学到很多。好吧，我想这可能足以解决我真正需要做的事情。但我想我已经把自己弄糊涂了w、 我真正想要的是，当在iframe中单击链接时，链接将加载到父窗口中。当然，默认行为是在子iframe中打开链接。我在原始消息中发布的代码的一个变体在单击链接时起作用，但仅在IE中起作用。我们还在这里查看XDM吗？我不希望修改请在子框架中键入代码（如果可能）。抱歉，我绕了一圈：（你说的是这样的吗？window.top.location.href=“//www.google.com”；还是说你想要所有的“常规”iframe中的链接将在顶部窗口中打开？Fansatic工作-为什么有时最简单的事情会盯着你看？最好的解决方案？我将你的原始答案标记为答案，因为它最准确地回答了我的原始问题。然而，讽刺的是，我只需要这么简单的东西。出色的工作，抱歉因为我的问题不够简洁
// 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"), '*');
        
    });

        
});

<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>

// 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"), '*');
        
    });

        
});

<base target="_parent" />