首先问题关键是，普通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("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>
4，其实更多操作widget对象的方法都类似，只要掌握1中的方法即可
分享到：
相关推荐
在Vuex中，所有组件共享同一状态，并通过actions、mutations和getters来操作和获取数据。 二、组件事件回调 1. 自定义事件：如上所述，子组件可以通过`$emit`触发自定义事件，父组件通过`v-on`或简写`@`监听并处理...
标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术，涉及跨框架（iframe）通信和DOM操作。这个技术主要应用于创建富交互的用户界面，允许用户在不同的iframe之间传递和操作...
在网页开发中，`iframe`（Inline Frame）是一种嵌入其他HTML文档的元素，它允许我们在一个页面中显示另一个页面的内容。本篇文章将深入探讨如何在`iframe`中调用JavaScript，实现父页面与子页面之间的方法交互。 一...
在ZK中，你可以在列表组件上设置一个事件监听器，当选择项改变时，将选中的ID通过事件发送出去，详情页面则订阅这个事件，接收到ID后加载对应的数据。 **ZK Example** 在压缩包"zkExample"中，可能包含了一个简单...
在网页开发中，有时我们需要实现一个功能，即在iframe中打开一个新的弹出窗口，并且这个弹出窗口能够遮罩住其父级页面，提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...
HTML5的跨iframe拖拽功能在移动端页面设计中是一个重要的技术点，它允许用户在不同的iframe之间自由地拖放元素，提升用户体验，特别是在构建可编辑的页面设计器时。本篇文章将详细探讨如何实现这一功能，并结合给定...
它通常用于警告用户他们正在进行的操作可能会导致数据丢失，但在这里我们可以利用它来监测`<iframe>`中页面的改变情况。 ##### 实现步骤： 1. **定义IFrame**： 在`main.html`中，通过`<iframe>`元素定义了一个...
通过创建一个iframe元素，并将其添加到文档中，可以实现在一个隔离的环境中进行打印，这样做的好处是用户可以打印页面的指定区域而不影响当前页面的其他内容。具体步骤如下： 1. 创建一个指定id的div元素作为打印...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画设计以及Ajax交互。本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户...
在网页开发中，有时我们需要在一个页面（子页面）中访问另一个页面（父页面）的数据或控制元素，这种情况下，`Iframe` 提供了一个解决方案。本文将深入探讨如何通过 `Iframe` 获取父页面的变量和控件。 首先，我们...
如果`iframe`加载的页面与主页面不在同一个域下，由于同源策略的限制，你可能无法直接在父页面中对`iframe`进行操作。此时，你需要在`iframe`内部的页面中处理右键菜单的禁用，或者使用`postMessage`和`message`事件...
标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先，我们需要了解IFrame（内联框架）的基本...
为了处理这种情况，通常我们会将相关操作放在iframe的“load”事件中或者在window的“load”事件中执行，以确保所有资源都已就绪。如果iframe内容动态加载，可能还需要考虑使用其他事件或定时器来检测DOM的变化。 ...
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。 在组件中绑定一个事件处理函数。 如bindtap，当用户点击该组件的时候会在...
Flex中的IFrame组件是一种在ActionScript（AS）环境中嵌入HTML内容或外部Web页面的工具。这个组件允许你在Flex应用程序中展示网页或者交互式的HTML内容，而无需直接修改HTML模板。这种功能对于需要在Flex应用中集成...
通过对上述知识点的学习，我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题，包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来说是非常...
在这个"html5整合iframe和Bootstrap"的项目中，我们看到`jquery-Bootstrap-dhkcj-iframe`这个文件名，这表明开发者可能使用了jQuery来辅助Bootstrap的功能，因为jQuery提供了一种简单的方式来处理DOM操作和事件处理...
在网页设计和开发中，有时候我们需要处理多个`iframe`（内联框架）并实现特定的交互效果，例如只显示其中一个`iframe`中的`div`元素，并确保它在所有其他元素之上，即处于最上层显示。这样的需求通常出现在需要创建...