如何在普通html中操作触发iframe中zk页面组件事件

snoopy7713

浏览: 1148145 次
性别:
来自: 火星郊区

最近访客更多访客>>

青木落扬

jccz_zys

msn877763580

yushi103

博主相关

博客

微博

相册

留言

关于我

博客专栏

: OSGi
浏览量：0

文章分类

社区版块

存档分类

博客分类：

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

分享到：

SWT对话框系列：倒计时关闭对话框 | 插件平台的类加载机制

2012-02-08 12:59
浏览 3403
评论(1)
分类:Web前端
查看更多

1 楼 qi90mufeng 2013-05-10

[color=red][/color]

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

如何在普通html中操作触发iframe中zk页面组件事件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

如何在普通html中操作触发iframe中zk页面组件事件

评论

发表评论

相关推荐

ZK PPT

zk+spring+hibernate延迟加载的解决办法

【zk开发】zk注解的秘密

【zk开发】zkstudio安装及使用视屏

zk主题生成器

zk服务器端获取鼠标点击位置

zk Fiddle-zk在线测试保存代码分享平台

zksample2-一个复杂应用的zk示例

zk5.0.8发布

zk数据绑定

zk EE/PE/CE的区别

ZK 5.0.8 新特性

zk client与server code结合提高长操作的响应性

zk tooltiptext中换行

zk下载文件中文乱码解决方案

【zk视频】如何了解一个组件默认支持服务器端事件

【zk视频】如何查看zk源码，了解zk原理

ZK 5.0.7发布，及新特性

use【组件公共属性】

zk异步请求异常，自定义错误页面的bug

最近访客更多访客>>