如何从自定义JSP标签传递script作用域变量？

你的问题其实出在JSP（服务器端）和JavaScript（客户端）的执行顺序完全不同，这是后端开发里很容易踩的坑，我来给你拆解清楚：

为什么当前代码不生效？ #

当用户访问你的index.jsp时，整个流程是这样的：

1. 服务器接收到请求，开始处理JSP页面：解析所有JSP标签、EL表达式（${foo}），生成纯HTML代码。
2. 此时<script>标签里的var foo = "bar";还只是作为字符串被服务器输出到HTML里，根本没有被执行——因为JavaScript是在浏览器拿到HTML后才会运行的。
3. 服务器找不到名为foo的服务器端变量，所以${foo}被解析为空字符串，导致你的自定义标签输出Hello, ! :)。
4. 服务器把生成好的HTML发送给浏览器，浏览器才执行<script>里的代码，定义foo变量，但这时候JSP标签早就执行完了，没法再影响已经输出的内容。

两种正确的解决方向 #

根据你的实际需求，分两种场景处理：

场景1：变量本来就来自服务器端 #

如果foo的值其实是服务器端生成的（比如从数据库、后端逻辑获取），那应该直接在服务器端定义变量，再传递给自定义标签：

修改index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="my" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%-- 服务器端定义变量 --%>
<% String foo = "bar"; %>
<script>
// 如果客户端也需要使用这个变量，可以从服务器端取值
var foo = '<%= foo %>';
</script>
<my:example var='${foo}'></my:example>
</html>

这样服务器端能正确识别${foo}，自定义标签会输出Hello, bar! :)，同时客户端也能拿到这个变量。

场景2：变量确实是客户端生成的 #

如果foo是客户端通过交互、计算等方式生成的（比如用户输入、前端逻辑处理），那需要用JavaScript修改已经渲染好的DOM：

首先修改example.tag，给输出的元素加一个可识别的ID：

<%-- example.tag --%>
<%@ attribute name="elementId" required="true" rtexprvalue="true"%>
<p id="${elementId}">Hello, ! :)</p>

然后在index.jsp里用JavaScript替换内容：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="my" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
// 等页面加载完成后执行
window.addEventListener('load', function() {
  var foo = "bar"; // 客户端生成的变量（可以是用户输入、前端计算等）
  // 找到标签输出的元素，修改其内容
  const greetingElement = document.getElementById('greeting');
  greetingElement.textContent = `Hello, ${foo}! :)`;
});
</script>
<my:example elementId='greeting'></my:example>
</html>

这种方式下，服务器先输出带ID的元素，浏览器加载完成后用JS把客户端变量的值替换进去，就能得到你想要的效果。

未来改进思路 #

以后遇到这类前后端交互的问题，先问自己：

• 这个变量是服务器端生成的，还是客户端生成的？
• 代码的执行时机是在服务器处理页面时，还是浏览器渲染页面后？

记住一个核心原则：服务器端代码（JSP、Java）和客户端代码（JS）运行在不同的环境，执行顺序是服务器先输出HTML，浏览器再执行JS，两者不能直接共享变量——除非通过HTTP请求（比如AJAX）把客户端数据传给服务器，或者用JS修改DOM来展示客户端变量。

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