Nodejs 引用视图之前传入js弹出问题

Nodejs 引用视图之前传入js弹出问题

enter code here   view[“alerts”]=  “<script>alert(‘sucess’)</script>”;
res.render(“user/list”, view);

这种情况怎么办 弹不了

4 回复

Node.js 引用视图之前传入 JS 弹出问题

问题描述

在使用 Node.js 和模板引擎（例如 EJS 或 Pug）渲染视图时，尝试通过传递包含 JavaScript 代码的字符串来实现页面加载时的弹窗提示，但发现弹窗并未正常显示。

示例代码

假设你正在使用 EJS 作为模板引擎，并且希望在用户列表页面加载时显示一个成功的弹窗提示。你可能尝试这样做：

// 在控制器或路由处理函数中
const view = {
    alerts: "<script>alert('success')</script>"
};
res.render("user/list", view);

解决方案

原因分析

  • 直接将 <script> 标签嵌入到字符串中传递给模板引擎通常不会按预期工作，因为模板引擎可能会对 HTML 进行转义，导致 <script> 标签被错误地处理。

解决方案一：使用模板引擎的特殊语法

如果你使用的是 EJS 模板引擎，可以利用其特殊语法来避免转义：

// 在 EJS 模板文件中
<%- alerts %>

这里 <%- 表示不进行 HTML 转义，直接输出内容。

解决方案二：在模板文件中直接编写脚本

另一种方法是在模板文件中直接编写脚本逻辑，而不是通过后端传递：

<!-- 在 user/list.ejs 文件中 -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        alert('success');
    });
</script>

这样，当页面加载完成时，会自动触发一个弹窗。

总结

直接通过后端传递包含 <script> 标签的字符串可能不会按预期工作，因为模板引擎会对 HTML 进行转义。可以使用模板引擎的特殊语法（如 EJS 中的 <%-）来确保脚本正确执行，或者直接在模板文件中编写脚本逻辑。


check html source

你的 script tag 可能被 encoded. 看 html 源码就知道了。

在 Node.js 中，如果你希望在渲染视图之前传递一些 JavaScript 代码，并且期望它能正确执行，你需要确保这些代码能够被视图正确解析。在你的例子中，直接将 <script> 标签嵌入到字符串中可能不会按预期工作，因为视图引擎可能会对这些标签进行转义。

示例代码

假设你使用的是 EJS 作为视图引擎，你可以这样做：

  1. 定义数据对象并传递给视图：
const view = {
    alerts: "alert('success')"
};
res.render("user/list", view);
  1. 在视图文件（例如 user/list.ejs）中使用该变量：
<!DOCTYPE html>
<html>
<head>
    <title>User List</title>
</head>
<body>
    <% if (alerts) { %>
        <script>
            alert(<%- JSON.stringify(alerts) %>);
        </script>
    <% } %>
</body>
</html>

解释

  • JSON.stringify：将 JavaScript 代码字符串安全地转换为可以嵌入到 <script> 标签中的格式。
  • <%-：在 EJS 中，<%- 表示输出内容而不进行 HTML 转义。这确保了 <script> 标签不会被转义。

这样处理后，当页面加载时，JavaScript 代码会被解析并执行，从而触发 alert 函数。

如果你使用其他视图引擎（如 Pug、Handlebars 等），方法类似，只需要调整语法以适应相应的视图引擎。

回到顶部