单击按钮会导致iframe中的事件吗?
Can a button click cause an event in iframe?
假设我在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图片?
提前感谢!
Try (this pattern)
$(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 http://jsfiddle.net/guest271314/2x4xz/
要访问iFrame DOM,您需要做的就是:
var x = document.getElementById("myframe");
var y = x.contentWindow.document;
或者你可以使用
来获取iFrame window.frames[0]
或类似的东西,如果你不喜欢使用iFrame的ID。
,然后你可以在文档中搜索某项内容并触发该元素的click事件
y.getElementById("somButton").click();
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!"
显然,你可以用它做很多事情。祝你玩得开心!
正如@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.
从火狐:Error: Permission denied to access property 'document'
And from 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.
相关文章:
- node-webkit-从父窗口捕获iframe鼠标事件
- 触摸启动事件未在iframe iOS 6中启动
- 从iframe事件中收听
- Window.onblur-禁用iframe事件
- 如何将事件侦听器添加到跨域iframe中的元素中
- 在iframe中加载pdf时,iframe未触发加载事件
- 使用 javascript 收听 youtube iframe 事件
- 取消 iframe 中具有 target=“_parent” 属性的链接事件
- iFrame.load事件未等待预加载图像完成
- 使用wordpress中的点击事件打开/更改Iframe
- 使用JQuery检测iframe事件
- 如何处理iframe中两次或根本不触发的IE11 localStorage事件
- 加载iframe时激发的事件
- Youtube嵌入Iframe-本地未触发事件
- 将事件发送到其他域上的iFrame
- 如何将隐藏/显示事件延迟到提交后Iframe加载
- IE11 iFrame点击事件弹出以影响窗口
- 无法在鳄梨酱iframe中获取键盘事件
- 获取angular的onload事件.iframe元素
- 如何检测一个iframe上的onscroll事件?iframe's源与页面的域相同