¿Cómo puedo leer un JSON en la etiqueta de script de JavaScript?

82

Tengo una página generada dinámicamente donde quiero usar un JavaScript estático y pasarle una cadena JSON como parámetro. He visto este enfoque utilizado por Google (consulte el botón +1 de Google: ¿cómo lo hacen? ).

Pero, ¿cómo debo leer la cadena JSON de 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>

En este JavaScript, me gustaría usar el argumento JSON {"org": 10, "items":["one","two"]}del documento HTML. No sé si es mejor hacerlo con jQuery o sin él.

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— Jonas
fuente

162

Cambiaría la declaración del script a esto:

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

Anote los campos de tipo e identificación. Después de esto

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

funcionará bien en todos los navegadores.

El type="application/json"es necesario para evitar que el navegador lo analice mientras se carga.

— c-sonrisa
fuente

Bueno, quiero que la etiqueta de script apunte a un JavaScript, por lo que no es solo para JSON. El JSON es solo un argumento para el script.

— Jonas

4

De acuerdo con las especificaciones de HTML5: dev.w3.org/html5/markup/script.html, el <script>elemento que ha definido SRC no debe contener nada más que nuevas líneas y / o comentarios. Consulte "Un elemento de secuencia de comandos con un atributo src debe contener solo:" en el enlace anterior. De lo contrario, los validadores de HTML se quejarán.

— c-smile

12

@WoIIe Debido a que TS ya usa jQuery, verifique <script src="jquery-1.6.2.min.js"></script>allí.

— c-smile

Me gusta el uso de jquery. Quiero decir, ¿cuántas fracciones más de milisegundo eliminará usando javascript vainilla (en este caso)?

— Captain Hypertext

1

Preste atención a que esto no es seguro, permite XSS, codepen.io/anon/pen/xevgEM

— felixmosh

13

Terminé con este código JavaScript para ser independiente de jQuery.

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

— Jonas
fuente

44

¿Por qué no simplemente darle al script una identificación y agarrarlo document.getElementById? De esa manera, no es necesario que recuerde mantenerlo al final. Tampoco lo hará quien más cambie la página en el futuro.

— George

2

Para leer JSON en <script id="myJSON">uso

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

También puede usar métodos para apuntar al script como 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>

Expandir fragmento

— Zekrom_Vale
fuente

La <script id="myJSON">etiqueta también necesita el type="application/json"atributo.

— Mikael Dúi Bolinder

1

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

o inventar algún otro método para identificar el guión.

Quizás en lugar de .html()lo que necesite .text(). No estoy seguro. Pruébelos ambos.

— Emil Ivanov
fuente

Gracias, funcionó cuando cambié el json a{"org": 10, "items":["one","two"]}

— Jonas

1

Este método es incorrecto. Si una <script>etiqueta tiene el src, NO DEBE tener ningún contenido.

— Iharob Al Asimi