有两个脚本元素。

Question

当我使用NodeJS将变量传递给我的html页面时，我可以使用内联脚本访问它，如下所示：

// passing myVar from the server
router.get('/', (req, res) => {
  res.render('index', { myVar: 'test'});
});

// access in index.ejs
<script>
  let myVar = <%- JSON.stringify(myVar) %>;
  alert(myVar);
</script>

如果我尝试在此处使用外部脚本而不是内联，我会遇到使用ejs语法<%- %>的错误。如何在外部脚本中访问myVar？

Answer 1

<%-和%>之间的代码是服务器端代码。

如果您将其从EJS模板文件移到静态JS文件中，那么无法获取数据。它不会被替换，您将EJS模板发送到浏览器，而不是在服务器上处理它以生成文档。

如果您将其从生成HTML的EJS模板文件移出到生成JavaScript的其他EJS模板文件中，那么它将正常工作（除了它将在服务器端具有不同的具有不同端点的URL）代码，因此您需要移动填充您尝试访问的变量的服务器端代码。

您有两个合理的选择：

有两个脚本元素。

获取页面数据：

<script>let myVar = <%- JSON.stringify(myVar) %>;</script>

一个包含JavaScript逻辑：

<script src="/js/logic.js"></script>

将生成的数据移动到页面

<div data-myVar="<%- JSON.stringify(myVar).replace(/"/g, "&quot;"); %>">...</div>

...然后通过DOM访问它。

Answer 2

您可以将您的变量放在数据值中，以便在脚本中使用js或jquery获取：

查看ejs方面：

<div class='test' data-test-value='<%= JSON.stringify(myVar) %'></div>

js脚本方：

- 如果你使用jquery：

var $test = $('.test').attr('data-test-value')
  alert($test);

- 如果你使用vanillaJs：

    var test = document.getElementsByClassName('test');
    var testValue = test[0].dataset.testValue;
    alert(testValue)

我不测试我的vanilla脚本，如果我的语法错误

，请参阅doc

如何在外部脚本中访问ejs变量

2 个答案:

有两个脚本元素。

将生成的数据移动到页面