Nodejs 外部JS文件 EJS变量

Nodejs 外部JS文件 EJS变量

外部JS文件无法访问EJS中传过来的变量，有什么办法可以解决么？

4 回复

Node.js 外部JS文件 EJS变量

在使用Node.js和EJS模板引擎时，有时会遇到一个问题：如何在外部JavaScript文件中访问通过EJS传递的变量。这通常是因为外部JavaScript文件与EJS模板之间存在隔离，导致外部JavaScript无法直接访问EJS中的变量。

解决方案

解决这个问题的一种方法是将需要使用的变量以某种方式嵌入到HTML页面中，然后在外部JavaScript文件中通过DOM操作来获取这些变量。以下是具体步骤：

  1. 在EJS模板中嵌入变量

    在EJS模板中，你可以将变量嵌入到HTML标签中，比如<script>标签内，或者作为数据属性添加到HTML元素上。

    <script>
  window.myVariable = '<%- myVar %>';
</script>

    或者：

    <div id="myData" data-my-var="<%- myVar %>"></div>

  2. 在外部JavaScript文件中读取变量

    • 如果你选择将变量直接嵌入到<script>标签中，那么可以直接通过全局变量访问它：

      // external.js
console.log(window.myVariable); // 输出 EJS 中传递的变量值

    • 如果你选择将变量作为数据属性添加到HTML元素上，可以通过DOM操作获取：

      // external.js
const myDataElement = document.getElementById('myData');
const myVar = myDataElement.getAttribute('data-my-var');
console.log(myVar); // 输出 EJS 中传递的变量值

示例代码

假设我们有一个简单的EJS模板文件 index.ejs 和一个外部JavaScript文件 external.js。

index.ejs

<!DOCTYPE html>
<html>
<head>
    <title>EJS and External JS</title>
</head>
<body>
    <h1>Welcome to the EJS Example!</h1>
    <p><%- message %></p>

    <!-- 嵌入EJS变量 -->
    <script>
      window.message = '<%- message %>';
    </script>

    <!-- 引入外部JS文件 -->
    <script src="/public/js/external.js"></script>
</body>
</html>

external.js

console.log(window.message); // 输出 EJS 中传递的变量值

在这个例子中，message 是一个从Node.js服务器传递给EJS模板的变量。通过将该变量嵌入到 <script> 标签中，我们在外部JavaScript文件中成功访问了这个变量。

这种方法简单且有效，能够帮助你在外部JavaScript文件中访问EJS传递的变量。


you can use a function callback , very easy.

签名: 交流群244728015 《Node.js 服务器框架开发实战》 http://url.cn/Pn07N3

能说得具体点么~？那个函数的定义要放在哪里?

在使用 Node.js 和 EJS 模板引擎时，有时候会遇到从 EJS 文件传递给模板的变量不能直接在外部的 JavaScript 文件中访问的问题。这是因为外部的 JavaScript 文件是在客户端加载的，而 EJS 变量是在服务器端渲染模板时处理的。不过，有一些方法可以解决这个问题。

方法一：将变量直接嵌入到 HTML 中

最简单的方法是将需要使用的变量直接嵌入到 HTML 页面中，这样在外部的 JavaScript 文件中就可以通过 DOM 操作获取这些变量。

示例代码：

index.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <script type="text/javascript">
        var myVariable = "<%= someVariable %>";
    </script>
    <script src="/path/to/your/external-script.js"></script>
</body>
</html>

external-script.js:

console.log(myVariable); // 输出从 EJS 中传递的变量

Node.js (server-side):

const express = require('express');
const app = express();
const ejs = require('ejs');

app.get('/', (req, res) => {
    const someVariable = "Hello from EJS!";
    res.render('index', { someVariable });
});

app.listen(3000, () => console.log('Server running on port 3000'));

这种方法虽然简单，但可能会导致页面中出现大量的 JavaScript 代码，从而影响页面的可读性和维护性。

方法二：通过 AJAX 请求获取数据

另一种方法是使用 AJAX 请求从服务器获取需要的数据，然后在 JavaScript 文件中处理这些数据。

示例代码：

index.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <script src="/path/to/your/external-script.js"></script>
</body>
</html>

external-script.js:

fetch('/data')
    .then(response => response.json())
    .then(data => {
        console.log(data.someVariable); // 输出从服务器获取的数据
    });

Node.js (server-side):

const express = require('express');
const app = express();

app.get('/data', (req, res) => {
    res.json({ someVariable: "Hello from server" });
});

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(3000, () => console.log('Server running on port 3000'));

这种方法的优点是可以保持 HTML 和 JavaScript 的分离，并且更加灵活，适用于需要动态更新数据的情况。

回到顶部