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

I have a dynamically generated page where I want to use a static JavaScript and pass it a JSON string as a parameter. I have seen this approach used by Google (see Google's +1 Button: How do they do it?).

我有一个动态生成的页面，我希望使用静态JavaScript并将JSON字符串作为参数传递给它。我曾见过谷歌使用的这种方法(参见谷歌的+1按钮:它们是如何做到的?)

But how should I read the JSON string from the JavaScript?

但是如何从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>

In this JavaScript I would like to use the JSON argument {"org": 10, "items":["one","two"]} from the HTML document. I don't know if it's best to do it with jQuery or without.

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

$(function() {
    // read JSON

    alert("the json is:")
})

4 个解决方案

#1

105

I would change the script declaration to this:

我将脚本声明改为:

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

Note type and id fields. After that

注意类型和id字段。在那之后

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

will work just fine in all browsers.

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

The type="application/json" is needed to prevent browser from parsing it while loading.

需要类型="application/json"来防止浏览器在加载时解析它。

#2

I ended up with this JavaScript code to be independent of jQuery.

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

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

#3

To read JSON in <script id="myJSON"> use

在

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

You can also use methods to point to the script like document.scripts[0]

还可以使用方法指向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>

#4

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

or invent some other method to identify the script.

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

Maybe instead of .html() you might need .text(). Not sure. Try them both.

可能需要.text()而不是.html()。不确定。都尝试一下。

#1

105