如何在普通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" "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" onclick="fireBtnEvent()">test</button>
<iframe id="ifrm" height="500px" width="500px" src="login.zul" style="border:1px solid red;">
</iframe>
</body>
</html>
3，zk页面完整代码
Xml代码
- <?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中的方法即可