2011-09-28 17 views
53

Ho una pagina generata dinamicamente in cui voglio utilizzare un JavaScript statico e passarlo come stringa a una stringa JSON. Ho visto questo approccio utilizzato da Google (vedi Google's +1 Button: How do they do it?).Come posso leggere un JSON nel tag di script da JavaScript?

Ma come devo leggere la stringa JSON da 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> 

In questo JavaScript vorrei utilizzare l'argomento JSON {"org": 10, "items":["one","two"]} dal documento HTML. Non so se è meglio farlo con jQuery o senza.

$(function() { 
    // read JSON 

    alert("the json is:") 
}) 

risposta

100

vorrei cambiare la dichiarazione di script per questo:

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

tipo di nota e campi ID. Dopo che

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

funzionerà bene in tutti i browser.

Il type="application/json" è necessario per impedire al browser di analizzarlo durante il caricamento.

+0

Bene, voglio che il tag script faccia riferimento a un JavaScript, quindi non è solo per JSON. Il JSON è solo un argomento per la sceneggiatura. – Jonas

+4

In base alle specifiche HTML5: http://dev.w3.org/html5/markup/script.html l'elemento ''. –

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

o inventare un altro metodo per identificare lo script.

Forse invece di .html() potrebbe essere necessario .text(). Non sono sicuro. Provali entrambi.

+0

Grazie, ha funzionato quando ho cambiato il JSON a "{" org ": 10," items ": [" one "," two "]}' – Jonas

14

Ho finito con questo codice JavaScript per essere indipendente da jQuery.

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

Perché non dare semplicemente allo script un ID e afferrarlo con 'document.get ElementById'? In questo modo, non devi ricordarti di tenerlo per ultimo. Né chiunque altro cambierà la pagina in futuro. – George

2

Per leggere JSON in <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 

È anche possibile utilizzare i metodi per puntare allo script come 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

Anche il tag '

Problemi correlati