JavaScript'ten komut dosyası etiketindeki bir JSON'u nasıl okuyabilirim?

83

Statik JavaScript kullanmak ve parametre olarak bir JSON dizesi geçirmek istediğim dinamik olarak oluşturulmuş bir sayfam var. Google tarafından kullanılan bu yaklaşımı gördüm ( Google'ın +1 Düğmesine bakın: Bunu nasıl yapıyorlar? ).

Ancak JSON dizesini JavaScript'ten nasıl okumalıyım?

<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>

Bu JavaScript'te {"org": 10, "items":["one","two"]}HTML belgesindeki JSON bağımsız değişkenini kullanmak istiyorum . Bunu jQuery ile mi yoksa onsuz mu yapmanın en iyisi olduğunu bilmiyorum.

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— Jonas
kaynak

164

Komut dosyası bildirimini şu şekilde değiştirirdim:

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

Not türü ve kimlik alanları. Daha sonra

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

tüm tarayıcılarda gayet iyi çalışacaktır.

type="application/json"Yüklenirken bunu ayrıştırma tarayıcıyı önlemek için gereklidir.

— c-gülümseme
kaynak

Şey, komut dosyası etiketinin bir JavaScript'i işaret etmesini istiyorum, bu nedenle bu sadece JSON için değil. JSON yalnızca komut dosyası için bir argümandır.

— Jonas

4

HTML5 Spec göre: dev.w3.org/html5/markup/script.html<script> SRC yeni hatlar ve / veya yorumlar dışında başka bir şey içermemelidir tanımlamıştır elemanı. Yukarıdaki bağlantıda "src özelliğine sahip bir komut dosyası öğesi yalnızca şunları içermelidir:" konusuna bakın. Aksi takdirde HTML doğrulayıcısı şikayet eder.

— c-smile

12

@WoIIe jQuery zaten TS tarafından kullanıldığından, <script src="jquery-1.6.2.min.js"></script>orayı kontrol edin .

— c-smile

Jquery kullanımını seviyorum. Demek istediğim, vanilya javascript (bu durumda) kullanarak bir milisaniyenin kaç kesirini tıraş edeceksiniz?

— Captain Hypertext

1

Bunun güvenli olmadığına dikkat edin, XSS, codepen.io/anon/pen/xevgEM

— felixmosh

12

Bu JavaScript kodunun jQuery'den bağımsız olmasını sağladım.

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

— Jonas
kaynak

45

Neden senaryoya bir kimlik verip onu yakalamıyorsunuz document.getElementById? Bu şekilde, onu uzun süre saklamayı hatırlamanıza gerek kalmaz. Gelecekte sayfayı başka kimse değiştirmeyecek.

— George

Bu cevabın orijinal versiyonu söz konusu linke esinlenerek, stackoverflow.com/questions/6713197/...

— Jonas

2

JSON'u <script id="myJSON">kullanımda okumak için

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

Ayrıca komut dosyasına işaret etmek için yöntemler de kullanabilirsiniz. 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>

Snippet'i genişlet

— Zekrom_Vale
kaynak

<script id="myJSON">Etiketi de ihtiyacı type="application/json"niteliğini.

— Mikael Dúi Bolinder

1

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

veya betiği tanımlamak için başka bir yöntem icat edin.

Belki .html()senin yerine ihtiyacın olabilir .text(). Emin değil. İkisini de deneyin.

— Emil Ivanov
kaynak

Teşekkürler, json'u{"org": 10, "items":["one","two"]}

— Jonas

1

Bu yöntem yanlış. Bir <script>etikette varsa, srcherhangi bir içeriğe sahip OLMAMALIDIR.

— Iharob Al Asimi