Wie kann ich einen JSON im Script-Tag aus JavaScript lesen?

82

Ich habe eine dynamisch generierte Seite, auf der ich ein statisches JavaScript verwenden und ihm eine JSON-Zeichenfolge als Parameter übergeben möchte. Ich habe diesen Ansatz von Google gesehen (siehe Googles +1-Schaltfläche: Wie machen sie das? ).

Aber wie soll ich die JSON-Zeichenfolge aus dem JavaScript lesen?

<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 diesem JavaScript möchte ich das JSON-Argument {"org": 10, "items":["one","two"]}aus dem HTML-Dokument verwenden. Ich weiß nicht, ob es am besten ist, es mit oder ohne jQuery zu machen.

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— Jonas
quelle

162

Ich würde die Skriptdeklaration folgendermaßen ändern:

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

Notiertyp- und ID-Felder. Nachdem

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

funktioniert in allen Browsern einwandfrei.

Dies type="application/json"wird benötigt, um zu verhindern, dass der Browser es beim Laden analysiert.

— c-smile
quelle

Nun, ich möchte, dass das Skript-Tag auf ein JavaScript verweist, also nicht nur für JSON. Der JSON ist nur ein Argument für das Skript.

— Jonas

4

Gemäß der HTML5-Spezifikation: dev.w3.org/html5/markup/script.html darf das <script>Element, das SRC definiert hat, nichts anderes als neue Zeilen und / oder Kommentare enthalten. Siehe "Ein Skriptelement mit einem src-Attribut darf nur Folgendes enthalten" im obigen Link. Andernfalls wird sich der HTML-Validator beschweren.

— C-Smile

12

@WoIIe Da jQuery bereits von TS verwendet wird, überprüfen Sie <script src="jquery-1.6.2.min.js"></script>dort.

— C-Lächeln

Ich mag die Verwendung von jquery. Ich meine, wie viele Bruchteile einer Millisekunde werden Sie mit Vanille-Javascript (in diesem Fall) rasieren?

— Kapitän Hypertext

1

Achten Sie darauf, dass dies nicht sicher ist, es erlaubt XSS, codepen.io/anon/pen/xevgEM

— felixmosh

13

Am Ende hatte ich diesen JavaScript-Code, um unabhängig von jQuery zu sein.

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

— Jonas
quelle

44

Warum geben Sie dem Skript nicht einfach eine ID und greifen darauf zu document.getElementById? Auf diese Weise müssen Sie nicht daran denken, es zuletzt zu behalten. Auch wer in Zukunft die Seite ändert, wird dies nicht tun.

— George

2

JSON im <script id="myJSON">Gebrauch lesen

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

Sie können auch Methoden verwenden, um auf das Skript wie zu verweisen 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>

Erweitern Sie das Snippet

— Zekrom_Vale
quelle

Das <script id="myJSON">Tag benötigt auch das type="application/json"Attribut.

— Mikael Dúi Bolinder

1

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

oder erfinden Sie eine andere Methode, um das Skript zu identifizieren.

Vielleicht anstelle von .html()dir brauchen .text(). Nicht sicher. Probieren Sie beide aus.

— Emil Ivanov
quelle

Danke, es hat funktioniert, als ich den json in{"org": 10, "items":["one","two"]}

— Jonas

1

Diese Methode ist falsch. Wenn ein <script>Tag das hat src, darf es überhaupt keinen Inhalt haben.

— Iharob Al Asimi