`
snoopy7713
  • 浏览: 1152477 次
  • 性别: 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]
发表评论

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

相关推荐

    Vue 组件间传值及事件触发Demo

    在Vuex中，所有组件共享同一状态，并通过actions、mutations和getters来操作和获取数据。 二、组件事件回调 1. 自定义事件：如上所述，子组件可以通过`$emit`触发自定义事件，父组件通过`v-on`或简写`@`监听并处理...

    拖拽一个iframe中的div 在另一个iframe页面中显示

    标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术，涉及跨框架（iframe）通信和DOM操作。这个技术主要应用于创建富交互的用户界面，允许用户在不同的iframe之间传递和操作...

    在iframe中调用js父页面和子页面方法

    在网页开发中，`iframe`（Inline Frame）是一种嵌入其他HTML文档的元素，它允许我们在一个页面中显示另一个页面的内容。本篇文章将深入探讨如何在`iframe`中调用JavaScript，实现父页面与子页面之间的方法交互。 一...

    zk curd 小例 数据绑定 页面间事件传送 适合初学者

    在ZK中，你可以在列表组件上设置一个事件监听器，当选择项改变时，将选中的ID通过事件发送出去，详情页面则订阅这个事件，接收到ID后加载对应的数据。 **ZK Example** 在压缩包"zkExample"中，可能包含了一个简单...

    iframe弹出框遮罩父类页面

    在网页开发中，有时我们需要实现一个功能，即在iframe中打开一个新的弹出窗口，并且这个弹出窗口能够遮罩住其父级页面，提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...

    iframe拖动功能..........

    在网页开发中，`iframe`（Inline Frame）是一种嵌入其他HTML页面的元素，它允许我们在一个页面中显示另一个页面的内容。"iframe拖动功能"指的是实现`iframe`元素可以被用户通过鼠标拖动来改变其在页面中的位置。这种...

    html5 跨iframe的拖拽实现移动端页面设计器

    HTML5的跨iframe拖拽功能在移动端页面设计中是一个重要的技术点，它允许用户在不同的iframe之间自由地拖放元素，提升用户体验，特别是在构建可编辑的页面设计器时。本篇文章将详细探讨如何实现这一功能，并结合给定...

    捕捉IFrame SRC改变事件

    它通常用于警告用户他们正在进行的操作可能会导致数据丢失，但在这里我们可以利用它来监测`&lt;iframe&gt;`中页面的改变情况。 ##### 实现步骤： 1. **定义IFrame**： 在`main.html`中，通过`&lt;iframe&gt;`元素定义了一个...

    js调用iframe实现打印页面内容的方法

    通过创建一个iframe元素，并将其添加到文档中，可以实现在一个隔离的环境中进行打印，这样做的好处是用户可以打印页面的指定区域而不影响当前页面的其他内容。具体步骤如下： 1. 创建一个指定id的div元素作为打印...

    JQUERY实现iframe页面切换功能

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画设计以及Ajax交互。本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户...

    ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容

    在***中实现点击左边页面链接时，右边iframe框架显示对应链接页面的内容，是一种常见的网页布局模式，经常被用于后台管理系统中。这种布局允许用户在一个窗口内操作导航，而在另一个子窗口内查看和处理内容，从而...

    iframe里无右键菜单

    如果`iframe`加载的页面与主页面不在同一个域下，由于同源策略的限制，你可能无法直接在父页面中对`iframe`进行操作。此时，你需要在`iframe`内部的页面中处理右键菜单的禁用，或者使用`postMessage`和`message`事件...

    demo_DEMO_子页面刷新父页面iframe_

    标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先，我们需要了解IFrame（内联框架）的基本...

    Jquery方式获取iframe页面中的 Dom元素

    为了处理这种情况，通常我们会将相关操作放在iframe的“load”事件中或者在window的“load”事件中执行，以确保所有资源都已就绪。如果iframe内容动态加载，可能还需要考虑使用其他事件或定时器来检测DOM的变化。 ...

    微信小程序 页面跳转事件绑定的实例详解

    事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。 在组件中绑定一个事件处理函数。 如bindtap，当用户点击该组件的时候会在...

    zk组件封装demo

    【标题】"zk组件封装demo"是一个示例项目，展示了如何对ZooKeeper（简称zk）组件进行封装，以便在实际开发中更高效、便捷地使用。ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务，它是集群的管理者，...

    ZK框架的一些事件促发介绍

    在ZK中，所有的事件都被放入一个队列中等待处理。这样可以确保事件按照正确的顺序执行，并且避免了并发问题。 - **事件处理顺序**：事件按照它们被添加到队列中的顺序进行处理。 - **同步与异步处理**：可以根据...

    Flex用的IFrame组件

    Flex中的IFrame组件是一种在ActionScript（AS）环境中嵌入HTML内容或外部Web页面的工具。这个组件允许你在Flex应用程序中展示网页或者交互式的HTML内容，而无需直接修改HTML模板。这种功能对于需要在Flex应用中集成...

    vue父组件点击触发子组件事件的实例讲解

    * 在该实例中，父组件中的按钮元素绑定了点击事件，并在事件处理函数中使用 `$refs` 对象来访问子组件的引用信息。 * 在子组件中，定义了一个 `parentMsg` 方法，并在父组件中被调用，用于接收父组件传递的参数。 ...

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