Jak mogę odczytać JSON w tagu skryptu z JavaScript?

83

Mam dynamicznie generowaną stronę, na której chcę użyć statycznego kodu JavaScript i przekazać mu ciąg JSON jako parametr. Widziałem to podejście stosowane przez Google (patrz Przycisk +1 Google: Jak oni to robią? ).

Ale jak mam odczytać ciąg JSON z 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>

W tym JavaScript chciałbym użyć argumentu JSON {"org": 10, "items":["one","two"]}z dokumentu HTML. Nie wiem, czy najlepiej to zrobić z jQuery, czy bez.

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— Jonas
źródło

164

Zmieniłbym deklarację skryptu na następującą:

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

Typ notatki i pola identyfikatora. Po tym

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

będzie działać dobrze we wszystkich przeglądarkach.

type="application/json"Jest potrzebne, aby zapobiec przeglądarki z parsowania go podczas załadunku.

— c-uśmiech
źródło

Cóż, chcę, aby tag skryptu wskazywał na JavaScript, więc nie dotyczy to tylko formatu JSON. JSON jest tylko argumentem skryptu.

— Jonas

4

Według specyfikacji HTML5: dev.w3.org/html5/markup/script.html ten <script>element, który został zdefiniowany SRC nie zawierają niczego innego niż nowych linii i / lub komentarze. Zobacz „Element skryptu z atrybutem src musi zawierać tylko:” w powyższym linku. W przeciwnym razie walidator HTML będzie narzekał.

— c-smile

12

@WoIIe Ponieważ jQuery jest już używane przez TS, sprawdź <script src="jquery-1.6.2.min.js"></script>tam.

— c-smile

Podoba mi się użycie jquery. Chodzi mi o to, ile jeszcze ułamków milisekundy ogolisz, używając waniliowego javascript (w tym przypadku)?

— Captain Hypertext

1

Zwróć uwagę, że to nie jest bezpieczne, pozwala XSS, codepen.io/anon/pen/xevgEM

— felixmosh

12

Skończyło się na tym, że ten kod JavaScript był niezależny od jQuery.

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

— Jonas
źródło

45

Dlaczego po prostu nie dać skryptowi identyfikatora i nie wziąć go ze sobą document.getElementById? W ten sposób nie musisz pamiętać, aby zachować to ostatnie. Nikt inny też nie zmieni strony w przyszłości.

— George,

Oryginalna wersja tej odpowiedzi została zainspirowana linkiem w pytaniu, stackoverflow.com/questions/6713197/ ...

— Jonas

2

Aby odczytać <script id="myJSON">używany format JSON

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

Możesz także użyć metod, aby wskazać skrypt, na przykład 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>

Rozwiń fragment

— Zekrom_Vale
źródło

<script id="myJSON">Tag potrzebuje również type="application/json"atrybut.

— Mikael Dúi Bolinder

1

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

lub wymyśl inną metodę identyfikacji skryptu.

Może zamiast .html()ciebie możesz potrzebować .text(). Niepewny. Wypróbuj oba.

— Emil Ivanov
źródło

Dzięki, zadziałało, kiedy zmieniłem json na{"org": 10, "items":["one","two"]}

— Jonas

1

Ta metoda jest zła. Jeśli <script>tag ma znak src, NIE MOŻE zawierać żadnej treści.

— Iharob Al Asimi