ZK框架中Java与JavaScript的跨边界通信与数据传递指南

// 假设这是iframe内的某个函数，当用户选择一个选项后调用
function sendOptionToParent(optionValue) {
    // 获取父窗口对象
    var parentWindow = window.parent; 
    // 发送消息到父窗口
    // 'http://localhost:8080' 应该替换为你的父页面的实际来源（协议+域名+端口）
    // 为了简化示例，这里使用 '*' 表示不限制来源，但在生产环境中应指定明确的来源以增强安全性。
    parentWindow.postMessage({ type: 'optionSelected', value: optionValue }, '*');
    console.log("Message sent from iframe:", optionValue);
}

// 示例：模拟在iframe加载完成后发送数据
window.onload = function() {
    // 假设iframe内部的逻辑获取到了一个值
    var myData = "data from iframe: testing";
    sendOptionToParent(myData);
};

<zk>
    <window title="Parent Page with Iframe">
        <iframe id="change_option" src="select_one_option.html" scrolling="no" width="700px" height="400px" />
        <label id="receivedDataLabel" value="No data received yet." />

        <script type="text/javascript">
            // 监听来自iframe的消息
            window.addEventListener('message', function(event) {
                // 验证消息来源，防止接收恶意消息
                // event.origin 应该与你的iframe的实际来源匹配
                // 例如：if (event.origin !== 'http://localhost:8080') return;
                console.log("Message received in parent:", event.data);

                // 检查消息类型，确保是预期的消息
                if (event.data && event.data.type === 'optionSelected') {
                    var receivedValue = event.data.value;
                    // 更新ZK组件的文本，这里需要ZK Client-side API
                    // 假设有一个ZK Label组件，其客户端ID是zk_comp_XXXX
                    // 更推荐的做法是让ZK后端处理，或者通过ZK提供的Client API更新组件
                    var label = zk.Widget.$(jq('$receivedDataLabel')); // 获取ZK组件的客户端实例
                    if (label) {
                        label.setValue("Received from iframe: " + receivedValue);
                    }
                }
            }, false);
        </script>
    </window>
</zk>

// Java后端代码 (例如在一个ZK Controller或ViewModel中)
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.util.Clients;
import javax.servlet.http.HttpSession;

public class MyController {

    public void saveAndSendToClient() {
        HttpSession session = (HttpSession) Executions.getCurrent().getDesktop().getSession().getNativeSession();
        session.setAttribute("myKey", "This is a test string from Java session.");

        // 从session中获取数据
        String dataFromSession = (String) session.getAttribute("myKey");

        // 将数据传递给客户端JavaScript
        // 注意：如果数据包含特殊字符（如引号），需要进行适当的转义
        String escapedData = org.zkoss.json.JSONObject.toJSONString(dataFromSession); // 使用ZK的JSON工具进行转义

        // 构建要执行的JavaScript代码
        // 这里假设客户端有一个名为 'receiveDataFromJava' 的JavaScript函数
        String jsCommand = "receiveDataFromJava(" + escapedData + ");"; 

        // 如果要将数据直接赋给iframe内部的JavaScript变量，需要更复杂的JS来访问iframe内容
        // 例如：
        // String iframeId = "change_option"; // 你的iframe组件ID
        // String jsCommand = "var iframe = document.getElementById('" + iframeId + "'); " +
        //                    "if (iframe && iframe.contentWindow) { " +
        //                    "    iframe.contentWindow.postMessage({ type: 'javaData', value: " + escapedData + " }, '*');" +
        //                    "}";

        Clients.evalJavaScript(jsCommand);
    }
}

// 嵌入在ZUL文件中的script标签内
<script type="text/javascript">
    function receiveDataFromJava(data) {
        console.log("Received data from Java via Clients.evalJavascript:", data);
        // 你可以在这里更新UI或执行其他JavaScript逻辑
        var label = zk.Widget.$(jq('$receivedDataLabel')); 
        if (label) {
            label.setValue("Received from Java: " + data);
        }
    }
</script>

// Java后端代码，将数据发送到父页面，父页面再通过postMessage转发给iframe
// ... (获取dataFromSession和escapedData)
String iframeId = "change_option"; // 你的iframe组件ID
String jsCommand = "var iframe = document.getElementById('" + iframeId + "'); " +
                   "if (iframe && iframe.contentWindow) { " +
                   "    iframe.contentWindow.postMessage({ type: 'javaData', value: " + escapedData + " }, '*');" +
                   "}";
Clients.evalJavaScript(jsCommand);

// 在iframe内部监听父页面发送的消息
window.addEventListener('message', function(event) {
    // 同样需要验证event.origin
    console.log("Message received in iframe from parent:", event.data);
    if (event.data && event.data.type === 'javaData') {
        var javaData = event.data.value;
        console.log("Java data received in iframe:", javaData);
        // 在iframe内使用这个数据
        document.getElementById('someElementInIframe').innerText = "Java Data: " + javaData;
    }
}, false);

// Java后端代码
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Textbox;

public class MyController {
    @Wire("#myTextbox") // 假设ZUL中有一个id为myTextbox的Textbox
    private Textbox myTextbox;

    public void init() {
        // 在适当的时机（例如页面加载后）
        String dataFromSession = (String) Executions.getCurrent().getDesktop().getSession().getNativeSession().getAttribute("myKey");
        if (dataFromSession != null) {
            myTextbox.setValue(dataFromSession); // ZK会自动将此值同步到客户端
        }
    }
}

<window title="My Page">
    <textbox id="myTextbox" />
    <!-- ... 其他组件 ... -->
</window>