将JavaScript数据块(JSON)插入HTML页面

Insert JavaScript data chunk (JSON) into an HTML page

本文关键字：插入 HTML 页面 JSON JavaScript 数据      更新时间：2023-09-26

我需要在我的HTML页面中包含一个JavaScript对象(JSON)。
在服务器上呈现页面HTML的同时呈现JSON。使用AJAX调用检索的数据是而不是。我可以想到两种方法来做到这一点，并寻求反馈和建议。与页面一起传递JavaScript (JSON) blob的好实践是什么?

选项1

HTML: 

<script type='text/javascript'>
    var model = { <JSON> };
</script>

. js: 

function doSomething() { <use this.model here> }

选项2

HTML: 

<script type='text/javascript'>
    loadModel({<JSON>});
</script>

.js(包含在HTML文件的顶部):

var model = null;
function loadModel(model) { this.model = model; }
function doSomething() { <use this.model here> }
变异

JSON可以存储在单独的.js文件中，而不是在HTML中包含JSON。对此有何评论?

选项1允许您在任何地方包含.js文件，并将其包含在页面底部使其呈现更快(好事)，但由于JavaScript在页面上呈现模型，这使得它成为一个没有意义的点。仍然不依赖于.js包含的位置，使其更不容易出错。
r#还抱怨(合理地)模型未初始化。

选项2感觉更好(它更好地封装了细节)，但是.js必须在调用loadModel之前包含。

这两种方式我都见过，也都做过，但没有注意到其中一种方式比另一种方式有什么显著的优势。

服务器平台应该无关紧要，但它是IIS 7.5/ASP。. NET MVC 3/Razor

忘记你的两个建议吧——它们都非常容易受到XSS的攻击。永远不要在脚本标签中放置不可信的文本。

请使用owasp的推荐。

把你的(HTML编码的)JSON放在DOM中，像这样:

<div id="init_data" hidden>
    <%= html_escape(data.to_json) %>
</div>

然后在JavaScript中这样读:

// external js file
var dataElement = document.getElementById('init_data');
// decode and parse the content of the div
var initData = JSON.parse(dataElement.textContent);

选项二的开销会稍微大一些。因为你有一个函数调用的开销，和一个额外的变量(你的参数)，它将被分配和释放。

正如你所说，两种方法都没有什么优点/缺点。

你会使用jQuery吗?然后你可以使用DOM ready事件，而不是在HTML中包含javascript。

编辑:

嗯，在这种情况下，您可以在生成页面时将JSON包含在隐藏元素中。然后在DOM ready事件中，您可以使用jQuery从页面读取和解析它。

另一种选择可能是使用HTML 5数据属性，并将数据包含在其中之一。

如果是我，我可能会使用ajax调用，因为它更容易，看起来更干净。

相关文章：