Как я могу прочитать JSON в теге скрипта из JavaScript?


83

У меня есть динамически сгенерированная страница, на которой я хочу использовать статический JavaScript и передать ей строку JSON в качестве параметра. Я видел этот подход, используемый Google (см. . Кнопку Google +1: как они это делают? ).

Но как мне прочитать строку 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 я хотел бы использовать аргумент JSON {"org": 10, "items":["one","two"]}из HTML-документа. Не знаю, лучше ли это делать с помощью jQuery или без него.

$(function() {
    // read JSON

    alert("the json is:")
})

Ответы:


164

Я бы изменил объявление сценария на это:

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

Поля типа и идентификатора заметки. После этого

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

будет отлично работать во всех браузерах.

Это type="application/json"необходимо, чтобы браузер не анализировал его при загрузке.


Ну, я хочу, чтобы тег скрипта указывал на JavaScript, так что это не только для JSON. JSON - это только аргумент сценария.
Jonas

4
Согласно спецификации HTML5: dev.w3.org/html5/markup/script.html на <script>элемент , который определил SRC не должна содержать ничего, кроме новых линий и / или комментариев. См. «Элемент сценария с атрибутом src должен содержать только:» в приведенной выше ссылке. В противном случае валидатор HTML будет жаловаться.
c-smile

12
@WoIIe Поскольку jQuery уже используется TS, проверьте <script src="jquery-1.6.2.min.js"></script>там.
c-smile

Мне нравится использование jquery. Я имею в виду, сколько еще долей миллисекунды вы скроете, используя ванильный javascript (в данном случае)?
Captain Hypertext

1
Обратите внимание, что это небезопасно, это позволяет XSS, codepen.io/anon/pen/xevgEM
felixmosh

12

В итоге я получил этот код JavaScript, независимый от jQuery.

var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);

45
Почему бы просто не дать скрипту идентификатор и не получить его document.getElementById? Таким образом, вам не нужно помнить, чтобы хранить его в последний раз. И никто другой не изменит страницу в будущем.
Джордж

Исходная версия этого ответа была вдохновлена ​​ссылкой в ​​вопросе, stackoverflow.com/questions/6713197/…
Jonas

2

Для чтения JSON в <script id="myJSON">использовании

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>


<script id="myJSON">Тег также нужен type="application/json"атрибут.
Mikael Dúi Bolinder

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

или изобрести какой-нибудь другой способ идентифицировать сценарий.

Может вместо .html()вас может понадобиться .text(). Не уверена. Попробуйте оба.


Спасибо, это сработало, когда я изменил json на{"org": 10, "items":["one","two"]}
Jonas

1
Это неправильный метод. Если <script>тег имеет, srcто он НЕ ДОЛЖЕН иметь никакого содержимого.
Ихароб Аль-Асими
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.