ZK框架下iframe中Java与Javascript的会话数据交互问题

你当前的尝试存在几个关键问题，导致无法正确访问或修改HttpSession中的值：

1. sessionStorage与HttpSession无关：sessionStorage是浏览器本地存储，仅存在于客户端，和服务器端的HttpSession完全不是同一个东西，所以调用sessionStorage.getItem("key")必然返回null。
2. 错误使用非ZK语法：<%= Session["key"] %>是ASP.NET的嵌入语法，ZK框架不支持这类解析，因此直接输出了原始字符串。
3. 解析SessionID无法直接获取值：从Cookie中提取SessionID仅能标识会话，但无法直接通过ID读取服务器端HttpSession的内容，必须通过服务器端接口交互。

针对你的需求，这里提供两种可行的解决方案：

方案一：通过ZK客户端API传递值并交互 #

利用ZK的页面渲染机制，先将HttpSession中的值暴露给父页面的JS变量，iframe再通过父页面获取；修改值时通过ZK的AJAX事件调用后台方法更新HttpSession。

1. 修改Zul页面，暴露Session值 #

<zk>
    <!-- 将服务器端Session的值注入到客户端JS变量 -->
    <script type="text/javascript">
        window.zkSessionKey = "${sessionScope.key}";
    </script>
    <iframe id="change_option" src="select_one_option.html" scrolling="no" width="700px" height="400px" />
</zk>

2. iframe的HTML中访问并修改值 #

// 从父页面获取Session中的初始值
var currentValue = parent.zkSessionKey;
console.log("Saved: " + currentValue); // 输出"testing"

// 定义修改Session值的方法，通过ZK的AJAX触发后台事件
function updateSessionKey(newValue) {
    // 触发iframe组件的自定义事件，传递新值
    zAu.send(new zk.Event(zk.Widget.$('$change_option'), 'onUpdateSession', {newValue: newValue}));
}

3. 后台Java代码监听事件更新Session #

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import javax.servlet.http.HttpSession;
import org.zkoss.zk.ui.Executions;
import java.util.Map;

public class PageComposer extends SelectorComposer {
    @Listen("onUpdateSession = #change_option")
    public void handleSessionUpdate(Event event) {
        // 获取传递的新值
        Map<String, Object> eventData = (Map<String, Object>) event.getData();
        String newValue = (String) eventData.get("newValue");
        
        // 更新HttpSession
        HttpSession session = (HttpSession) Executions.getCurrent().getDesktop().getSession().getNativeSession();
        session.setAttribute("key", newValue);
    }
}

方案二：通过独立Servlet实现数据交互 #

如果iframe的HTML页面需要独立与服务器交互，可以编写一个Servlet，专门处理Session值的读取和更新，HTML通过fetch请求该Servlet。

1. 编写Session交互Servlet #

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/session-api")
public class SessionApiServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 读取Session中的值并返回JSON
        String value = (String) request.getSession().getAttribute("key");
        response.setContentType("application/json");
        response.getWriter().write("{\"value\": \"" + value + "\"}");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 接收新值并更新Session
        String newValue = request.getParameter("newValue");
        request.getSession().setAttribute("key", newValue);
        response.setContentType("application/json");
        response.getWriter().write("{\"status\": \"success\"}");
    }
}

2. iframe的HTML中调用Servlet #

// 获取Session值
fetch('/session-api')
    .then(res => res.json())
    .then(data => {
        console.log("Saved: " + data.value);
    });

// 更新Session值
function updateSessionKey(newValue) {
    fetch('/session-api', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `newValue=${encodeURIComponent(newValue)}`
    })
    .then(res => res.json())
    .then(data => {
        console.log("Session值已更新");
    });
}

内容的提问来源于stack exchange，提问作者Nissus