我们说我在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图片?
提前致谢!
答案 0 :(得分:3)
尝试(此模式)
$(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);
});
});
答案 1 :(得分:1)
要访问iFrame DOM,您只需要:
var x = document.getElementById("myframe");
var y = x.contentWindow.document;
或者您可以使用
获取该iFrame window.frames[0]
或者类似的东西,如果你不想在iFrame上使用ID。
然后您可以在该文档中搜索某些内容并触发该元素上的单击事件。
y.getElementById("somButton").click();
答案 2 :(得分:1)
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>
这一点,在运行时,会产生并警告说你说“我是鲍勃!”
显然,你可以做很多事情。玩得开心:))
答案 3 :(得分:0)
@ssergei正确pointed,出于安全原因,这是不可能的。这是我用来捕捉错误的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.