Как я могу прочитать 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:")
})

javascript json script-tag

— Йонас
источник

164

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

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

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

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

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

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

— c-улыбка
источник

Ну, я хочу, чтобы тег скрипта указывал на 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то он НЕ ДОЛЖЕН иметь никакого содержимого.

— Ихароб Аль-Асими