如何在普通html中操作触发iframe中zk页面组件事件-优快云博客

本文介绍了一种在普通HTML页面中通过JavaScript操控嵌入的ZK(zkoss)页面元素的方法，具体展示了如何触发ZK页面上的按钮点击事件。

首先问题关键是，普通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));
	 }

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>

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(&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中的方法即可