如何从JavaScript中读取脚本标签中的JSON？

82

我有一个动态生成的页面，我想在其中使用静态JavaScript，并将JSON字符串作为参数传递给它。我已经看到Google使用了这种方法（请参阅Google的+1按钮：他们是如何做到的？）。

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

<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中，我想使用{"org": 10, "items":["one","two"]}HTML文档中的JSON参数。我不知道是否最好使用jQuery。

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— 乔纳斯
source

162

我将脚本声明更改为：

<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>

注释类型和ID字段。之后

var data = JSON.parse(document.getElementById('data').innerHTML);

在所有浏览器中都可以正常工作。

的type="application/json"需要，以防止浏览器解析它，而加载。

— 微笑
source

好吧，我希望脚本标签指向JavaScript，所以它不仅适用于JSON。JSON只是脚本的一个参数。

— 乔纳斯（Jonas）

4

根据HTML5规范：dev.w3.org/html5/markup/script.html<script>定义了SRC的元素除换行和/或注释外，不得包含任何其他内容。请参见上面的链接中的“具有src属性的脚本元素必须仅包含：”。否则，HTML验证程序将抱怨。

— c-smile

12

@WoIIe因为TS已经使用了jQuery，所以请检查<script src="jquery-1.6.2.min.js"></script>那里。

— c-smile

我喜欢jquery的用法。我的意思是，通过使用普通javascript（在这种情况下），您将节省几毫秒的时间？

— Captain Hypertext

1

请注意，这是不安全的，它允许使用XSS，codepen.io

— anon / pen /

13

我最终以该JavaScript代码独立于jQuery。

var json = document.getElementsByTagName('script');
var myObject = JSON.parse(json[json.length-1].textContent);

— 乔纳斯
source

44

为什么不只给脚本一个ID并使用它document.getElementById呢？这样，您就不必记住将其保持在最后。将来也不会有其他人更改页面。

— 乔治

2

读取正在<script id="myJSON">使用的JSON

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON

您也可以使用方法指向脚本，例如 document.scripts[0]

    //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);

<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>

展开摘要

— Zekrom_Vale
source

该<script id="myJSON">标签也需要type="application/json"属性。

— MikaelDúiBolinder

1

JSON.parse($('script[src="mysript.js"]').html());

或发明其他方法来识别脚本。

也许而不是.html()您可能需要.text()。不确定。两者都尝试。

— 埃米尔·伊万诺夫（Emil Ivanov）
source

谢谢，当我将json更改为{"org": 10, "items":["one","two"]}

— Jonas

1

这种方法是错误的。如果<script>标签具有标签，src则它绝对不能包含任何内容。

— Iharob Al Asimi