首先问题关键是,普通html页面与zul页面必须同域下,否则浏览器不允许跨域操作
思路:获取iframe 中zk页面中zk相关组件操作的js api,使用zk js api操作zk页面元素及激发事件
1,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页面完整代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <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" "http://www.w3.org/TR/html4/loose.dtd">
<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" οnclick="fireBtnEvent()">test</button>
<iframe id="ifrm" height="500px" width="500px" src="login.zul" style="border:1px solid red;">
</iframe>
</body>
</html>
3,zk页面完整代码
- <?xml version="1.0" encoding="utf-8"?>
- <?page cacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
- <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
- <?taglib uri="http://www.zkoss.org/zktools/zktools" prefix="z" ?>
- <div
- style="background: url('images/headerbg.png') repeat-x; background-position:0 -53px;height:100%;"
- xmlns:w="client" xmlns:n="native" xmlns="http://www.zkoss.org/2005/zul"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
- <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;"></label>
- </div>
- </caption>
- <grid oddRowSclass="non-odd" height="115px">
- <columns>
- <column width="95px" align="right"></column>
- <column ></column>
- </columns>
- <rows>
- <row>
- <cell>用户名:</cell>
- <cell>
- <textbox id="txtUsername"></textbox>
- </cell>
- </row>
- <row>
- <cell>密码:</cell>
- <cell>
- <textbox id="txtPassword" type="password"></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="http://www.zkoss.org/dsp/web/core" prefix="c" ?> <?taglib uri="http://www.zkoss.org/zktools/zktools" prefix="z" ?> <div style="background: url('images/headerbg.png') repeat-x; background-position:0 -53px;height:100%;" xmlns:w="client" xmlns:n="native" xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"> <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;"></label> </div> </caption> <grid oddRowSclass="non-odd" height="115px"> <columns> <column width="95px" align="right"></column> <column ></column> </columns> <rows> <row> <cell>用户名:</cell> <cell> <textbox id="txtUsername"></textbox> </cell> </row> <row> <cell>密码:</cell> <cell> <textbox id="txtPassword" type="password"></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中的方法即可