`
snoopy7713
  • 浏览: 1124899 次
  • 性别: Icon_minigender_2
  • 来自: 火星郊区
博客专栏
Group-logo
OSGi
浏览量：0
社区版块
存档分类
最新评论

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

    博客分类：
  • ZK
zulzk 
阅读更多

首先问题关键是，普通html页面与zul页面必须同域下，否则浏览器不允许跨域操作

 

 

思路：获取iframe 中zk页面中zk相关组件操作的js api,使用zk js api操作zk页面元素及激发事件

 

 

1，js关键代码

 

Js代码 复制代码 收藏代码
  1. function fireBtnEvent(){   
  2. //获取iframe中的window对象   
  3.    var ifrmWindow =document.getElementById('ifrm').contentWindow;   
  4. //获取zk页面中的jq对象，使用jq对象查找zk页面元素   
  5. var jq =ifrmWindow.jq;   
  6. //获取zk页面中js对象zk，用于dom到zk widget的转化与事件的构造   
  7. var zk =ifrmWindow.zk;   
  8. var btnLogin =zk.Widget.$(jq("$btnLogin"),ifrmWindow.document);   
  9. ifrmWindow.zAu.send(new zk.Event(btnLogin,"onClick",null));   
  10. }  
	 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代码 复制代码 收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script>  
  10.      function fireBtnEvent(){   
  11.         //获取iframe中的window对象   
  12.         var ifrmWindow =document.getElementById('ifrm').contentWindow;   
  13.         //获取zk页面中的jq对象，使用jq对象查找zk页面元素   
  14.         var jq =ifrmWindow.jq;   
  15.         //获取zk页面中js对象zk，用于dom到zk widget的转化与事件的构造   
  16.         var zk =ifrmWindow.zk;   
  17.         var btnLogin =zk.Widget.$(jq("$btnLogin"),ifrmWindow.document);   
  18.         ifrmWindow.zAu.send(new zk.Event(btnLogin,"onClick",null));   
  19.      }   
  20.   </script>  
  21.  </head>  
  22.   
  23.  <body>  
  24.   <button id="demo" onclick="fireBtnEvent()">test</button>  
  25.   <iframe id="ifrm" height="500px" width="500px" src="login.zul" style="border:1px solid red;">  
  26.   </iframe>  
  27.  </body>  
  28. </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代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <?page  cacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>  
  3. <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>  
  4. <?taglib uri="http://www.zkoss.org/zktools/zktools" prefix="z" ?>  
  5. <div  
  6.     style="background: url('images/headerbg.png') repeat-x;  background-position:0 -53px;height:100%;"  
  7.     xmlns:w="client" xmlns:n="native" xmlns="http://www.zkoss.org/2005/zul"  
  8.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  9.     xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">  
  10.     <window apply="${z:ctrl('loginController')}" width="300px"  
  11.         height="140px" onOK="Events.postEvent(&quot;onClick&quot;,btnLogin,null);"  
  12.         mode="overlapped" position="center,top" style="margin-top:100px;">  
  13.         <caption>  
  14.             <div align="left" >  
  15.                 <label value="欢迎您使用录音查询系统" style="font-weight:bold;font-size:14px;"></label>  
  16.             </div>  
  17.         </caption>  
  18.         <grid oddRowSclass="non-odd" height="115px">  
  19.             <columns>  
  20.                 <column width="95px" align="right"></column>  
  21.                 <column ></column>  
  22.             </columns>  
  23.             <rows>  
  24.                 <row>  
  25.                     <cell>用户名：</cell>  
  26.                     <cell>  
  27.                         <textbox id="txtUsername"></textbox>  
  28.                     </cell>  
  29.                 </row>  
  30.                 <row>  
  31.                     <cell>密码：</cell>  
  32.                     <cell>  
  33.                         <textbox id="txtPassword" type="password"></textbox>  
  34.                     </cell>  
  35.                 </row>  
  36.                 <row height="50px">  
  37.                     <cell colspan="2" align="center">  
  38.                         <button label="登录" id="btnLogin" forward="onLogin" />  
  39.                     </cell>  
  40.                 </row>  
  41.             </rows>  
  42.         </grid>  
  43.     </window>  
  44. </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中的方法即可

分享到：
| 插件平台的类加载机制
评论
1 楼 qi90mufeng 2013-05-10  
[color=red][/color]
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics