2011-09-28 36 views
53

Tengo una página generada dinámicamente en la que quiero usar un JavaScript estático y pasarle una cadena JSON como parámetro. He visto este enfoque utilizado por Google (ver Google's +1 Button: How do they do it?).¿Cómo puedo leer un JSON en la etiqueta de script desde JavaScript?

Pero, ¿cómo debo leer la cadena JSON desde 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 utilizar 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:") 
}) 

Respuesta

100

que cambiaría la declaración script para esto:

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

tipo de nota y campos ID. Después de eso

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

funcionará bien en todos los navegadores.

Se necesita el type="application/json" para evitar que el navegador lo analice durante la carga.

+0

Bueno, quiero que el script-tag apunte a un JavaScript, por lo que no es solo para JSON. El JSON es solo un argumento para el guion. – Jonas

+4

De acuerdo con las especificaciones de HTML5: http://dev.w3.org/html5/markup/script.html el elemento '' allí. –

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

o inventar algún otro método para identificar la secuencia de comandos.

Tal vez en lugar de .html() es posible que necesite .text(). No es seguro. Pruébalos a los dos.

+0

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

14

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

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

¿Por qué no simplemente le das una ID al script y lo agarras con 'document.get ElementById'? De esta manera, no tienes que recordar mantenerlo por última vez. Tampoco lo hará quien 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 utilizar métodos para apuntar a la secuencia de comandos 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>

+0

La etiqueta '

Cuestiones relacionadas