使用 iframe 的内容在页面上执行 jquery .click()
perform jquery .click() on page using iframe's content
如果可能,我可以单击iframe中的元素并让它在呈现它的页面上执行功能吗?
例如:
<div class="page">
<iframe class="frame">[... the source will render: <div class="clickme"></div>...]
</iframe>
。同时,回到主页...
<script>
$(".clickme").click(function(){
alert('clicked');
});
</script>
</div>
编辑也,我忘了提到 iframe 的 src 在页面加载后会发生变化,这可能是一个障碍!
它似乎对我不起作用,我在这里找不到合适的答案/问题。谢谢!
如果用户单击 iframe 中的项目会导致在父级中触发函数,则假设父级中有一个名为 doStuff
的函数,则以下内容将起作用:
window.top.doStuff();
当然,这需要 iframe 的域与父页面的域匹配。
如果需要跨域怎么办?
如果您需要跨域通信,那么HTML5 postMessage函数将使您能够将父页面注册为iframe的侦听器,从而允许iframe将消息传递到父页面。
在父 HTML 中,注册侦听器:
// register to listen for postMessage events
window.addEventListener("message", receiveMessage, false);
// this is the callback handler to process the event
function receiveMessage(event)
{
// you're responsible for your own security. Make sure requests are
// coming from domains you whitelist!
if (event.origin !== "http://example.org:8080")
return;
if(event.data == "click!") {
// do your stuff on the parent page here
}
}
在 iframe HTML 页面中:
// pass the string "click!" to the parent page, where the receiveMessage
// handler will take action when it sees the message matches.
top.window.postMessage("click!", targetOrigin);
有关更多详细信息,请参阅window.postMessage。
您可以使用 content(( 访问 iframe 中的元素
$('.frame').contents().find('.clickme').each(function(){
$(this).click(function(){ //this is .clickme
//enter code here
})
});
注意 如果 iframe 的 SRC 来自不同的域,您将被拒绝访问。
你可以在Iframe中调用一个函数,
window.frames['iframeName'].yourFunction();
并在 Iframe 中
<script>
$(".clickme").click(function(){
yourFunction();
});
function yourFunction(){
alert('clicked');
}
</script>
相关文章:
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- 在Grails中的gsp中执行jquery代码
- 使用数组表示法对多个字段执行jQuery日期选择器
- 可以'不能间接执行JQuery函数
- 必须等待执行 jQuery,直到加载服务
- 如何按顺序执行 jQuery 函数
- 如何在 ul 标签下执行 JQuery UI 自动完成
- 如何在Safari提交表单之前执行JQuery
- 对未知数量的元素执行Jquery循环
- 页面内容加载完毕后执行Jquery功能
- 在动态列表中单击的特定img上执行JQuery
- 如何在运行时添加的对象上执行Jquery插件
- Android-Javascript:如何在webview中执行jquery
- 在setTimeout中执行jQuery成员函数而不关闭的方法
- Jquery:在Jquery的(字符串)变量中执行Jquery脚本
- 执行Jquery函数()的两个条件
- 表单提交成功后调用/执行JQuery函数
- 当记录达到10以上时,Bootstrap中的DataTable不执行jQuery
- 通过javascript加载jQuery后执行jQuery代码
- 如何正确执行Jquery动画浮动