JavaScriptからscript-tagのJSONを読み取るにはどうすればよいですか？

83

静的JavaScriptを使用してJSON文字列をパラメーターとして渡す動的に生成されたページがあります。私はこのアプローチがグーグルによって使用されているのを見ました（グーグルの+1ボタン：彼らはそれをどのように行うのですか？を参照）。

しかし、JavaScriptからJSON文字列をどのように読み取る必要がありますか？

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

このJavaScriptでは{"org": 10, "items":["one","two"]}、HTMLドキュメントのJSON引数を使用したいと思います。jQueryを使用するのが最善かどうかはわかりません。

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— ジョナス
ソース

164

スクリプト宣言を次のように変更します。

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

タイプフィールドとIDフィールドに注意してください。その後

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

すべてのブラウザで問題なく動作します。

type="application/json"読み込みながら、それを解析することからブラウザを防止するために必要とされます。

— c-smile
ソース

スクリプトタグがJavaScriptを指すようにしたいので、JSONだけではありません。JSONはスクリプトへの引数にすぎません。

— Jonas

4

HTML5仕様によると：dev.w3.org/html5/markup/script.html<script> SRCを定義した要素には、新しい行やコメント以外のものを含めることはできません。上記のリンクの「src属性を持つスクリプト要素には次のもののみが含まれている必要があります」を参照してください。そうでなければ、HTMLバリデーターは文句を言うでしょう。

— c-smile

12

@WoIIe jQueryはすでにTSで使用されているため、<script src="jquery-1.6.2.min.js"></script>そこで確認してください。

— c-smile

私はjqueryの使用法が好きです。つまり、バニラJavaScript（この場合）を使用して、ミリ秒の何分の1を削り取ることができますか？

— キャプテンハイパーテキスト

1

これは安全ではないことに注意してください。XSS

— anon /

12

私はこのJavaScriptコードをjQueryから独立させることにしました。

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

— ジョナス
ソース

45

スクリプトにIDを付けて、それを取得してみdocument.getElementByIdませんか？そうすれば、それを最後に保つことを覚えておく必要はありません。また、他の誰も将来ページを変更することはありません。

— ジョージ

この回答のオリジナル版は、問題のリンク、触発されたstackoverflow.com/questions/6713197/...

— ジョナス

2

<script id="myJSON">使用中のJSONを読み取るには

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

次のようなスクリプトを指すメソッドを使用することもできます。 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>

スニペットを展開

— Zekrom_Vale
ソース

<script id="myJSON">タグは、必要とtype="application/json"属性を。

— –MikaelDúiBolinder 2017

1

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

または、スクリプトを識別するための他の方法を考案します。

多分.html()あなたの代わりに必要かもしれません.text()。わからない。両方試してください。

— エミル・イワノフ
ソース

おかげで、jsonを次のように変更したときに機能しました{"org": 10, "items":["one","two"]}

— Jonas

1

この方法は間違っています。<script>タグにsrcthenが含まれている場合、そのタグにはコンテンツがまったく含まれていてはなりません。

— Iharob AlAsimi18年