Як я можу прочитати 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 - це лише аргумент сценарію.

— Йонас,

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 (у цьому випадку)?

— Капітан Гіпертекст

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/…

— Йонас,

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
джерело

<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тоді він ПОВИНЕН НЕ мати жодного вмісту.

— Іхароб Аль Асімі,