首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何从JavaScript中读取脚本标记中的JSON?

如何从JavaScript中读取脚本标记中的JSON?
EN

Stack Overflow用户
提问于 2011-09-28 17:33:46
回答 4查看 104.1K关注 0票数 95

我有一个动态生成的页面,其中我希望使用静态JavaScript并将JSON字符串作为参数传递给它。我见过谷歌使用这种方法(参见Google's +1 Button: How do they do it?)。

但是,我应该如何从JavaScript中读取JSON字符串呢?

代码语言:javascript
复制
<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="myscript.js">{"org": 10, "items":["one","two"]}</script>
  </head>
  <body>
    Hello
  </body>
</html>

在这个JavaScript中,我想使用HTML文档中的JSON参数{"org": 10, "items":["one","two"]}。我不知道使用jQuery还是不使用它是最好的。

代码语言:javascript
复制
$(function() {
    // read JSON

    alert("the json is:")
})
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-11-01 00:01:20

我会将脚本声明更改为:

代码语言:javascript
复制
<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>

注意type和id字段。在那之后

代码语言:javascript
复制
var data = JSON.parse(document.getElementById('data').textContent);

在所有浏览器中都能很好地工作。

需要type="application/json"来防止浏览器在加载时对其进行解析。

我们之所以使用textContent而不是innerHTMLinnerText来读取原始的Json文本,是因为innerHTML试图将内容解析为HTML,这将导致性能降低,并可能导致解析错误和XSS攻击,而且innerText不会获取原始文本,而是寻找人类可见的文本,而textContent获取的是纯文本(这正是您想要的)。有关innerHTMLinnerText为什么不好的更多详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

票数 180
EN

Stack Overflow用户

发布于 2011-10-31 23:53:16

我最终得到了独立于jQuery的JavaScript代码。

代码语言:javascript
复制
var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);
票数 12
EN

Stack Overflow用户

发布于 2017-05-25 02:06:19

<script id="myJSON">中阅读JSON

代码语言:javascript
复制
var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON

还可以使用像document.scripts[0]这样的方法指向脚本

代码语言:javascript
复制
    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //Gets text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);
代码语言:javascript
复制
<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7581133

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档