Question

我有一个名为loginModal的模态的应用程序，其中包含一个iframe

<window id="loginModal" title="Login" border="normal" position="center,top" closable="true" width="500px" height="350px" >
    <iframe src="/usermenu.zul"  id="iframeLogin" scrolling="false" width="100%" height="100%"/>
</window>

iframe调用页面用户菜单。在某些情况下，用户菜单可以重定向到其内容大于模态的验证页面。我想找到一种方法，在进行重定向时，我可以调整模式的大小，使其自动变大。

请注意，getParent返回null并且不会将模态对象返回给我。

我尝试在到达验证页面时向loginModal发送消息。收到消息但我无法通过javascript调整模式大小。

在验证页面

<script type="text/javascript">
window.parent.postMessage('verification','*');
</script>

在loginModal

中

<script type="text/javascript">
window.addEventListener('message', receiveMessage, false);

function receiveMessage(evt) {

    if (evt.data == 'verification') {
        loginModal.height = 500;
    }
}
</script>

我尝试了一些变体来设置高度，但它们都不起作用。我知道邮件正在到达loginModal，因为我可以发送警报。任何帮助，将不胜感激。谢谢

Answer 1

你不需要像你在Sari awnser的评论中提到的iframe。只需在模态窗口中添加Composer

即可

<window id="loginModal" ...  apply="mypkg.MyComposer">

和“假”这里的重定向逻辑。

class MyComposer extends SelectorComposer {

@Wire
Window loginModal;

public void doAfterCompose(Component comp){
    super.doAfterCompose(comp);
    if(checkConditionForVerificationPage){
      Executions.createComponents("/verification.zul", loginModal, null);
    } else {
      Executions.createComponents("/usermenu.zul", loginModal, null);
    }
}
}

我的经验告诉我，最好避免zk中的真实重定向。
不太令人惊讶，cos zk是ajax :)
如果您要删除验证页面并在验证通话后添加用户菜单

Events.sendEvent("onVerify", loginModal, mydata);

成功后在验证页面Composer中

并添加到上面的作曲家

@Listen("onVerify = #loginModal")
  public void handelVerification(Event e) {
  loginModal.removeChild(loginModal.query("#idOfTopComponentFromVerificationPage"));
  Executions.createComponents("/usermenu.zul", loginModal, null);
}

当然，您可以设置loginModal的高度和宽度

loginModal.setWidth("100px");

Answer 2

ZK的作用是将您的loginModal页面加载到一个桌面，将iframeLogin页面加载到另一个桌面。桌面的概念进一步明确here。

因此，loginModal不是iframeLogin的父浏览器窗口。这就是getParent在您的iframe上调用null时的原因。

如ZK Component Reference中所述，可能无法访问连接到其他桌面的组件。换句话说，loginModal和iframeLogin之间的信息交换被禁用。

您似乎有两种选择之一：

不使用iframe，而是使用include。
使用iframe但在组范围下定义Event Queue。使此事件队列对loginModal和iframeLogin都可见，并使用它在您拥有的两个桌面之间交换信息。

编辑1

请确保：

通过插入合并客户端名称空间 xmlns:w="http://www.zkoss.org/2005/zk/client" window defer="true" 标签
在创建所有小部件后，通过将script插入this标记来评估您的JS代码。

在您的第二个JS代码段中，script引用了window小部件本身。您的script和window共存于同一ID space。换句话说，您的script和window是研究员。

因此，要引用script中的this.$f('loginModal').setHeight("500px"); this.$f().loginModal.setHeight("500px"); zk.Widget.$(jq('$loginModal')[0]).setHeight("500px");，请使用以下任何：

loginModal.height = 500;

而不是：

script

编辑2

为了进一步举例说明，以下JS loginModal会使<window id="loginModal" title="Login" border="normal" width="500px" height="350px" xmlns:w="http://www.zkoss.org/2005/zk/client"> <script defer="true"> this.$f('loginModal').setHeight("700px"); </script> </window>的初始高度翻倍：

{{1}}

以编程方式调整zk模式

2 个答案: