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. In basic terms, I need a function to perform when the contents of an iframe are clicked. For the purposes o

Solution 1:

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 (parent):

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

JavaScript (parent):

// parent_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).functionparent_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_concernsif (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]);
        }
        elseconsole.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 eventif (window.addEventListener)
            window.addEventListener("message", parent_on_message, false);
        elsewindow.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 (child):

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

JavaScript (child):

// child_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).functionchild_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_concernsif (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]);
        }
        elseconsole.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 eventif (window.addEventListener)
            window.addEventListener("message", child_on_message , false);
        elsewindow.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"), '*');
        
    });

        
});

Further reading:

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

Solution 2:

If you just want to make links in the iframe open in the top window instead of inside of the iframe check out How to force link from iframe to be opened in the parent window

Just put this in the head of the iframe HTML:

<base target="_parent" />