BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptからscriptタグでJSONを読み込むには？

2023-01-07 03:30:33

質問

静的なJavaScriptを使用し、パラメータとしてJSON文字列を渡したい、動的に生成されたページがあります。私はこのアプローチがGoogleによって使用されているのを見たことがあります( Googleの+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では、JSONの引数である {"org": 10, "items":["one","two"]} をHTML文書から取得したいと思います。jQueryでやるのがいいのか、やらないのがいいのかわかりません。 

$(function() {
    // read JSON

    alert("the json is:")
})

どのように解決するのですか？

スクリプトの宣言をこのように変更するのです。 

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

typeとidフィールドに注目してください。その後に 

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

はどのブラウザでも問題なく動作します。

は type="application/json" は、読み込み中にブラウザが解析するのを防ぐために必要です。

そして、なぜ textContent の代わりに innerHTML または innerText でJsonの生テキストを読むことができるのは innerHTML はコンテンツを HTML としてパースしようとするため、パフォーマンスが低下し、パースバグや XSS 攻撃の可能性があるからです。 innerText は生のテキストを取得せず、代わりに人間が見ることができるテキストを探しますが、一方 textContent は純粋なテキストをそのまま取得します (これはあなたが望むことです)。参照 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent を参照してください。 innerHTML と innerText が悪い。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します