Can a button click cause an event in iframe?

Let's say I have a button right next to an Iframe and in that Iframe is a download link. Is it possible that when I click the outside button, the download link on the iframe will be clicked?

<button type="button">Click Me!</button>

<iframe src="" height="400" width="800">

For example, in the jsfiddle link above, how could I make it so that the w3 picture would be downloaded by just clicking the button?

Thanks in advance!



Try (this pattern)

$(function () {

    var url = [""]; // `url`, e.g., ``
    var iframe = $("<iframe>", {
            "id": "frame",
            "width": "400px",
            "height": "300px"
        .then(function (b) {

        var img = $("<img>", {
                 "id" : "frameimg",
                "width": "400px",
                "height": "300px",
        }).css("background", "blue");
             var a = $("<a>", {
                "href" : url[0],
                "html" : img
            }).css("textDecoration", "none");
        var button = $("<button>", {
            "html": "click"
        }).css("fontSize", "48px")
            .one("click", function (e) {
                .find("body a")




To access the iFrame DOM, all you need to do is :

  var x = document.getElementById("myframe");
  var y = x.contentWindow.document; 

or you can get that iFrame by using


or something like that if you prefer not to use an ID for iFrame.

and then you can search for something in that document and trigger a click event on that element.


Mozilla's JSChannel is designed for communicating to/fro an iframe using POST. You should consider checking it out.

An example communiqué

The parent HTML could be

<script src="jschannel.js"></script>
<iframe id="childId" src="child.html"></iframe>
    var myChildChannel ="childId").contentWindow, "*", "testScope");
        method: "myMethodName",
        params: "I'm Bob!",
        success: function(v) {

Now for the child:

<script src="jschannel.js"></script>
    var myParentChannel =, "*", "testScope");
    myParentChannel.bind("myMethodName", function(t, param) {
        return 'you said "'+param+'"';

This, when run, will produce and alert saying you said "I'm Bob!"

Obviously, you can do a lot with this. Have fun :)


As correctly pointed by @ssergei, this is not possible for security reasons. This is the jsFiddle I used for catching the errors:

This is the SecurityError message that Google Chrome throws:

Uncaught SecurityError: Failed to read the 'contentDocument' property from
'HTMLIFrameElement': Blocked a frame with origin ""
from accessing a frame with origin "".
Protocols, domains, and ports must match.

From Firefox:

Error: Permission denied to access property 'document'

And from Safari:

Blocked a frame with origin "" from accessing a frame
with origin "". Protocols, domains, and ports must match.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.