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=".asp?filename=tryhtml5_a_download" 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!

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?

http://jsfiddle/idude/9RQ3N/

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

<iframe src="http://www.w3schools./tags/tryit.asp?filename=tryhtml5_a_download" 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!

• javascript
• jquery
• iframe

Share Improve this question Follow edited Jul 11, 2014 at 0:31 Bergi 667k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Jul 11, 2014 at 0:12 idudeidude 4,94288 gold badges3838 silver badges5151 bronze badges 1

• 3 Not possible for security reasons. Take a look at CSRF – ssergei Commented Jul 11, 2014 at 0:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3 +50

Try (this pattern)

$(function () {

    var url = ["http://example"]; // `url`, e.g., `http://example`
    var iframe = $("<iframe>", {
            "id": "frame",
            "width": "400px",
            "height": "300px"
    });
    $.when($("body").append(iframe))
        .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) {
            $(b).find("#frame").contents()
                .find("body a")
                .get(0).click()
        });
        $(button).appendTo(b);
        $(b).find("#frame").contents()
            .find("body").html(a);
    });

});

jsfiddle http://jsfiddle/guest271314/2x4xz/

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

  window.frames[0] 

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.

  y.getElementById("somButton").click();

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

An example muniqué

The parent HTML could be

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

Now for the child:

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

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: http://jsfiddle/9RQ3N/5/.

This is the SecurityError message that Google Chrome throws:

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

From Firefox:

Error: Permission denied to access property 'document'

And from Safari:

Blocked a frame with origin "http://fiddle.jshell" from accessing a frame
with origin "http://www.w3schools.". Protocols, domains, and ports must match.