首先问题关键是，普通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.zkvar 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.zkvar 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/htmlcharset=UTF-8" >
<taglib uri="" prefix="c" >
<taglib uri="" prefix="z" >
<div
style="background: url('images/headerbg.png') repeat-x background-position:0 -53pxheight: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:boldfont-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/htmlcharset=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中的方法即可
1、ZK是一套开放源码、相容於XUL/HTML标准、Java写成的开发工具。 2、ZK是一套以AJAX/XUL/Java为基础的网页应用程序开发框架，用于丰富网页应用程序的使用界面。最大的好处是在设计AJAX网络应用程序时，轻松简便的操作就像设计桌面程序一样。ZK包含了一个以AJAX为基础、事件驱动event-driven、高互动性的引擎，同时还提供了丰富多样、可重复使用的XUL与HTML组件，以及以XML为基础的使用界面设计语言ZKUserinterfacesMarkupLanguage。 3、ZK提供超过60个XUL组件及80个XHTML组件。举凡listbox，slider，audio，slider，tree，combobox，tabbox，auto-completion等均有支援。ZK亦提供FCKeditor和Dojo的组件，让使用者直接以Java控制，无须使用JavaScript。
