How to get element's id in click event inside an iframe?

Question

<iframe id="myiframe" src="doc.html">
    <button id="btn1"></button><!-- how to get this id? -->
</iframe>

$('#myiframe').on('click', function () {
    alert(this.id);
});

I want it to alert "btn1".

Answer 1

No. There is no way to do this for security reasons.

The only way to communicate between an iframe and the current page is if the url in the iframe already contains some javascript and updates the iframe url. The iframe then put some data in the url that the page can retrieve.

If the target of the iframe does not belong to you, this is impossible.

Answer 2

See jQuery cross domain iframe scripting for a complex workaround which could possibly make this work.

This is not recommended though; the best approach would be to rearchitect the document and try to solve a different problem. For example, you could request the remote content via an ajax call and insert it into your document.

For example, using jQuery.load:

$(".target-element").load("doc.html", null, function() {
    var id = $(".target-element").find("#btn").attr("id");
});

Answer 3

this.id isn't valid I think, it would also be technically selecting the wrong id(#myIframe)

you'd want something like this.children().attr('id');