点击按钮能在iframe中触发事件吗？

Question

假设我有一个按钮，紧挨着一个iframe，在该iframe中有一个下载链接。当我点击外面的按钮时，是否可以触发iframe中的下载链接呢？ http://jsfiddle.net/idude/9RQ3N/

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

<iframe src="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download" height="400" width="800">

例如，在上面的jsfiddle链接中，我该如何使点击按钮就可以下载w3图片呢？

提前感谢！

- idude

---

由于安全原因，不可能实现。请查看跨站请求伪造（CSRF）。 - ssergei

Answer 1

尝试（这个模式）

$(function () {

    var url = ["http://example.org"]; // `url`, e.g., `http://example.org`
    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 {{链接1：http://jsfiddle.net/guest271314/2x4xz/}}

- guest271314

Answer 2

要访问 iFrame DOM，你只需要执行以下操作：

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

或者您可以使用以下方式获取iFrame：

  window.frames[0] 

如果您不想使用ID来标识iFrame，那么可以使用类似的方式。

然后，您可以在该文档中搜索某些内容，并在该元素上触发点击事件。

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

- Ash

---

你可以使用 contentDocument 替代 contentWindow.document。但是，当然，不能跨域。 - Oriol

在跨域情况下，它会抛出类似于“拒绝访问属性”之类的错误。 - Ash

Answer 3

Mozilla的JSChannel是为了使用POST与iframe进行通信而设计的。你应该考虑查看它。

一个示例通信

父级HTML可能是：

<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>

现在是针对孩子的内容：

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

当运行此代码时，会产生一个警报，显示你说了"I'm Bob!"

显然，你可以用它做很多事情。玩得开心 :)

- lucasem

---

除非我弄错了，否则这仅在您控制iframe的内容时才起作用。 OP在他的示例中链接到w3schools，我认为他不拥有该网站。 - Dan Hlavenka

Answer 4

正如@ssergei所指出的那样，由于安全原因这是不可能的。这是我用来捕获错误的jsFiddle：http://jsfiddle.net/9RQ3N/5/。

这是Google Chrome抛出的SecurityError消息：

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

从Firefox:

Error: Permission denied to access property 'document'

而从Safari浏览器：

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

- danilopopeye