怎么在普通html中操作触发iframe中zk页面组件事件 _HTML/CSS

如何在普通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(&quot;onClick&quot;,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中的方法即可