iframe标签内的事件（Javascript中 如何通过div响应里面的iframe点击事件）

本文目录

• Javascript中 如何通过div响应里面的iframe点击事件
• 如何在普通html中操作触发iframe中zk页面组件事件
• jq 在iframe中点击按钮,父元素触发事件

Javascript中 如何通过div响应里面的iframe点击事件

div所在的文档
《html》
《head》
《title》无标题文档《/title》
《/head》
《body》
《script》
function DivClick()
{
alert(’你单击了div’);
}
《/script》
《div style=’height: 100; width:100’ onclick=’DivClick()’》单击div《/div》
《iframe scrolling="no" frameborder="0" src="iframe.html" height="100px" width="100px" id="flowFrame"》《/iframe》
《/body》
《/html》
下面是iframe.html
《html》
《head》
《title》无标题文档《/title》
《/head》
《body》
《script》
function iFrameClick()
{
window.parent.DivClick();
}
《/script》
《a href="#" onclick=’iFrameClick()’》执行主窗口的divClick《/a》
《/body》
《/html》

如何在普通html中操作触发iframe中zk页面组件事件

如何在普通html中操作触发iframe中zk页面组件事件
　　首先问题关键是，普通html页面与zul页面必须同域下，否则浏览器不允许跨域操作
　　思路：获取iframe 中zk页面中zk相关组件操作的js api,使用zk js api操作zk页面元素及激发事件
　　1，js关键代码
　　Js代码
function fireBtnEvent(){ 　
//获取iframe中的window对象
　 var ifrmWindow =document.getElementById(’ifrm’).contentWindow; 　
//获取zk页面中的jq对象，使用jq对象查找zk页面元素
var jq =ifrmWindow.jq; 　
//获取zk页面中js对象zk，用于dom到zk widget的转化与事件的构造
var zk =ifrmWindow.zk; 　
var btnLogin =zk.Widget.$(jq("$btnLogin"),ifrmWindow.document); 　
ifrmWindow.zAu.send(new zk.Event(btnLogin,"onClick",null)); 　
}　
　　function fireBtnEvent(){ //获取iframe中的window对象 var ifrmWindow =document.getElementById(’ifrm’).contentWindow; //获取zk页面中的jq对象，使用jq对象查找zk页面元素 var jq =ifrmWindow.jq; //获取zk页面中js对象zk，用于dom到zk widget的转化与事件的构造 var zk =ifrmWindow.zk; var btnLogin =zk.Widget.$(jq("$btnLogin"),ifrmWindow.document); ifrmWindow.zAu.send(new zk.Event(btnLogin,"onClick",null)); }
　　2，html页面完整代码
　　Html代码
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""》
《html》
《head》
《title》 New Document 《/title》
《meta name="Generator" content="EditPlus"》
《meta name="Author" content=""》
《meta name="Keywords" content=""》
《meta name="Description" content=""》
《script》
　　 function fireBtnEvent(){ 　
　　　　//获取iframe中的window对象 　
　　　　var ifrmWindow =document.getElementById(’ifrm’).contentWindow; 　
　　　　//获取zk页面中的jq对象，使用jq对象查找zk页面元素 　
　　　　var jq =ifrmWindow.jq; 　
　　　　//获取zk页面中js对象zk，用于dom到zk widget的转化与事件的构造 　
　　　　var zk =ifrmWindow.zk; 　
　　　　var btnLogin =zk.Widget.$(jq("$btnLogin"),ifrmWindow.document); 　
　　　　ifrmWindow.zAu.send(new zk.Event(btnLogin,"onClick",null)); 　
　　 } 　
《/script》
《/head》
《body》
《button id="demo" onclick="fireBtnEvent()"》test《/button》
《iframe id="ifrm" height="500px" width="500px" src="login.zul" style="border:1px solid red;"》
《/iframe》
《/body》
《/html》
　　《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""》 《html》 《head》 《title》 New Document 《/title》 《meta name="Generator" content="EditPlus"》 《meta name="Author" content=""》 《meta name="Keywords" content=""》 《meta name="Description" content=""》 《script》 function fireBtnEvent(){ //获取iframe中的window对象 var ifrmWindow =document.getElementById(’ifrm’).contentWindow; //获取zk页面中的jq对象，使用jq对象查找zk页面元素 var jq =ifrmWindow.jq; //获取zk页面中js对象zk，用于dom到zk widget的转化与事件的构造 var zk =ifrmWindow.zk; var btnLogin =zk.Widget.$(jq("$btnLogin"),ifrmWindow.document); ifrmWindow.zAu.send(new zk.Event(btnLogin,"onClick",null)); } 《/script》 《/head》 《body》 《button id="demo" onclick="fireBtnEvent()"》test《/button》 《iframe id="ifrm" height="500px" width="500px" src="login.zul" 》 《/iframe》 《/body》 《/html》
　　3，zk页面完整代码
　　Xml代码
《 xml version="1.0" encoding="utf-8" 》
《 pagecacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8" 》
《 taglib uri="" prefix="c" 》
《 taglib uri="" prefix="z" 》
《div
style="background: url(’images/headerbg.png’) repeat-x;　background-position:0 -53px;height:100%;"
xmlns:w="client" xmlns:n="native" xmlns=""
xmlns:xsi=""
xsi:schemaLocation=""》
《window apply="${z:ctrl(’loginController’)}" width="300px"
height="140px" onOK="Events.postEvent("onClick",btnLogin,null);"
mode="overlapped" position="center,top" style="margin-top:100px;"》
《caption》
《div align="left" 》
《label value="欢迎您使用录音查询系统" style="font-weight:bold;font-size:14px;"$amp;》amp;$lt;/label》
《/div》
《/caption》
《grid oddRowSclass="non-odd" height="115px"》
《columns》
《column width="95px" align="right"$amp;》amp;$lt;/column》
《column $amp;》amp;$lt;/column》
《/columns》
《rows》
《row》
《cell》用户名：《/cell》
《cell》
《textbox id="txtUsername"$amp;》amp;$lt;/textbox》
《/cell》
《/row》
《row》
《cell》密码：《/cell》
《cell》
《textbox id="txtPassword" type="password"$amp;》amp;$lt;/textbox》
《/cell》
《/row》
《row height="50px"》
《cell colspan="2" align="center"》
《button label="登录" id="btnLogin" forward="onLogin" /》
《/cell》
《/row》
《/rows》
《/grid》
《/window》
《/div》
　　《 xml version="1.0" encoding="utf-8" 》 《 page cacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8" 》 《 taglib uri="" prefix="c" 》 《 taglib uri="" prefix="z" 》 《div xmlns:w="client" xmlns:n="native" xmlns="" xmlns:xsi="" xsi:schemaLocation=""》 《window apply="${z:ctrl(’loginController’)}" width="300px" height="140px" onOK="Events.postEvent("onClick",btnLogin,null);" mode="overlapped" position="center,top" 》 《caption》 《div align="left" 》 《label value="欢迎您使用录音查询系统" $amp;》amp;$lt;/label》 《/div》 《/caption》 《grid oddRowSclass="non-odd" height="115px"》 《columns》 《column width="95px" align="right"$amp;》amp;$lt;/column》 《column $amp;》amp;$lt;/column》 《/columns》 《rows》 《row》 《cell》用户名：《/cell》 《cell》 《textbox id="txtUsername"$amp;》amp;$lt;/textbox》 《/cell》 《/row》 《row》 《cell》密码：《/cell》 《cell》 《textbox id="txtPassword" type="password"$amp;》amp;$lt;/textbox》 《/cell》 《/row》 《row height="50px"》 《cell colspan="2" align="center"》 《button label="登录" id="btnLogin" forward="onLogin" /》 《/cell》 《/row》 《/rows》 《/grid》 《/window》 《/div》
　　4，其实更多操作widget对象的方法都类似，只要掌握1中的方法即可

jq 在iframe中点击按钮,父元素触发事件

　方法如下：
　　当在段落上按下鼠标按钮时执行一段 JavaScript：
　　《p onmousedown="mouseDown()"》请点击此文本！《/p》
　　定义和用法
　　onmousedown 属性在鼠标按钮在元素上按下时触发。
　　提示：相对于 onmousedown 事件的事件次序（限于鼠标左/中键）：
　　onmousedown onmouseup onclick
　　相对于 onmousedown 事件的事件次序（限于鼠标右键）：
　　onmousedown onmouseup oncontextmenu
　　注释：onmousedown 属性不适用以下元素：《base》、《bdo》、《br》、《head》、《html》、《iframe》、《meta》、《param》、《script》、《style》 或 《title》。