Functioning onclick method for iframe

Question

I've been searching everywhere for a solution for this, but all the solutions I've found haven't worked. I want to get the clicks that happen within the iframe that I have in the document. I get the "document ready" alert but I never get the "iframe clicked" alert no matter where I click. I am using ASP.NET MVC 5. Here's the code:

@Scripts.Render("~/bundles/jquery")
@{
    ViewBag.Title = "Home Page";
}

<div id="terminal-iframe-wrap" class="map-info-wrapper" style="display: none">
    <iframe name="terminal-iframe" id="terminal-iframe" class="terminal-url-wrapper" frameBorder="0"></iframe>
</div>

<div id="all-terminals-view" class="map-info-wrapper">
    <div id="map" class="map"></div>

</div>

@section scripts
{
    <script src="~/Scripts/lib/promise.min.js"></script>
    <script src="~/Scripts/lib/fetch.js"></script>
    <script src="~/Scripts/app/map.js"></script>
    <script async defer src="//maps.googleapis.com/maps/api/js?key=somethingsomething&callback=initMap"></script>
    <script>
        $(document).ready(function () {
            alert("document ready.");
            document.getElementById('terminal-iframe').contentWindow.document.body.onclick = function (event) {
                alert("iframe clicked");
                if (e.target.id != "right-side-menu" && !$(e.target).parents("#right-side-menu").size()) {
                    if ($('#right-side-menu').hasClass('in')) {
                        $('#right-side-menu').collapse('hide');
                    }
                }
            };
        });
    </script>
}

Answer 1

You can use it like:

jQuery has a method, called .contents(), that when used on an iframe element returns the document of the iframe.

    // Get a reference to the iframe document
var iframeDoc = $('#iFrame').contents().get(0);

// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
    // do something
});

This will work for you.

For more details you can visit: http://api.jquery.com/contents/

Answer 2

Your javascript code seen to be OK, see the codepen below:

http://codepen.io/anon/pen/ryWoKX?editors=1010

    $(document).ready(function () {

  document
    .getElementById('terminal-iframe')
    .contentWindow.document.body.onclick = function (event) {
                console.log('clicked !');
     };
});

your problem is that you have a "display:none" in #terminal-iframe-wrap