Nodejs 外部js文件引用<%=title%>变量

Nodejs 外部js文件引用<%=title%>变量

我有个小问题想请教下：在ejs文件中<%=title%>变量已经可以获取，但是在引用的js文件中，使用<%=title%>却获得不到值，这个是有其他方法吗？还是思路不对，只能在ejs文件中用script的方法使用<%=title%>变量呢？

代码：

    服务器端：
    res.render('tab', { title: 'tabexpress' , user:user });

客户端：
在ejs里引用&lt;%=title%&gt;正常
在ejs里的script中引用‘&lt;%=title%&gt;’也正常
但是在html里引用外部js文件，在外部js文件里引用‘&lt;%=title%&gt;’，就得不到值了。

问题： 这个是我用错了，有其他方法在外部js中使用此变量吗？ 还是思路不对，只能在ejs文件中用script的方法使用<%=title%>变量呢？

多谢指导！


6 回复

当然可以。你提到的问题是因为EJS模板引擎在渲染HTML时，只会在嵌入到HTML中的脚本标签（如 <script>）内处理EJS语法。因此，如果你将JavaScript代码放在单独的 .js 文件中，那么这些EJS模板标签（如 <%=title%>）不会被解析。

解决方案

你可以通过以下几种方法来解决这个问题：

方法1：将变量传递给全局变量

你可以在你的EJS文件中设置一个全局变量，然后在外部的JavaScript文件中使用这个全局变量。

服务器端代码:

res.render('tab', { title: 'tabexpress', user: user });

客户端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <script>
        // 将EJS变量设置为全局变量
        window.title = "<%= title %>";
    </script>
    <script src="/path/to/your/external.js"></script>
</body>
</html>

外部JavaScript文件 (external.js):

console.log(title);  // 输出 'tabexpress'

方法2：使用数据属性

你也可以在HTML元素上添加数据属性，然后在JavaScript中读取这些属性。

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <div id="app" data-title="<%= title %>"></div>
    <script src="/path/to/your/external.js"></script>
</body>
</html>

外部JavaScript文件 (external.js):

const title = document.getElementById('app').getAttribute('data-title');
console.log(title);  // 输出 'tabexpress'

这两种方法都可以让你在外部JavaScript文件中访问EJS模板引擎生成的变量。选择哪种方法取决于你的具体需求和项目的结构。


想要弄清楚这个问题，先去了解一下 ejs 是个什么东西

如果你真要想外部js引用到title

<script>
  var title = '<%= title %>';
</script>
<script src="main.js"></script>

ejs 在生成 html 的时候，会插值到 <%= %> 的地方。这是在服务端做的。

你外部的引用的 js，是在 ejs 生成了 html 之后，由浏览器负责解释。

这样说明白了吧？

解决方案：

同 1L 所说。

逻辑：

需要将你的 title 变量放置在一个外部 js 可以访问的地方。

好的，明白了！ 谢谢！！！

我也遇到这个问题，感谢！

在 EJS 模板引擎中，<%=title%> 这种语法只能在嵌入到 HTML 的脚本标签内或直接在 HTML 中使用。由于外部 JavaScript 文件是在客户端执行的，而 <%=title%> 是在服务端渲染时生成的内容，因此无法直接在外部 JS 文件中访问。

不过，你可以通过以下几种方式来解决这个问题：

  1. 将变量注入到全局对象中：在 EJS 模板中将 title 变量作为全局变量注入到 JavaScript 环境中。这样可以在外部 JavaScript 文件中访问该全局变量。

    示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <!-- 其他 HTML 代码 -->
    <script>
        window.title = "<%= title %>";
    </script>
    <script src="/path/to/your/script.js"></script>
</body>
</html>

    在 script.js 中：

    console.log(window.title); // 输出 'tabexpress'

  2. 使用 Ajax 请求：如果 title 需要在页面加载后动态获取，可以通过 Ajax 请求从服务器获取数据。

  3. 直接在 EJS 中处理逻辑：如果你的业务逻辑比较简单，可以直接在 EJS 模板中处理所有逻辑，避免在外部 JS 文件中访问服务端变量。

以上方法可以帮助你在外部 JavaScript 文件中访问 EJS 模板中的变量。希望这些解决方案对你有所帮助。

回到顶部