HTML / Javascript：srcが設定されたスクリプトタグにロードされたJSONデータにアクセスする方法

90

ページが表示可能であるため、クライアントでアクセスできるようにしたいサーバーで生成したこのJSONファイルがあります。基本的に私が達成したいのは：

私のhtmlドキュメントで次のタグが宣言されています： 

<script id="test" type="application/json" src="http://myresources/stuf.json">

ソースで参照されているファイルにはJSONデータが含まれています。これまで見てきたように、スクリプトの場合と同じように、データがダウンロードされています。

では、Javascriptでアクセスするにはどうすればよいですか？多数のメソッドを使用してjQueryを使用して、または使用せずにスクリプトタグにアクセスして、JSONデータを取得しようとしましたが、どういうわけかこれは機能しません。innerHTMLjsonデータがスクリプトにインラインで書き込まれていれば、それを取得することは機能していました。それはそうではなく、私が達成しようとしていることでもありません。

提案したい場合は、ページの読み込み後のリモートJSONリクエストもオプションではありません。

javascript  json  html  script-tag 
— ChuckE
ソース
3
jsonファイルの代わりに、オブジェクトを変数に割り当てるjavascriptファイルにします。もう1つのアプローチは、ajaxを使用することです。
— Asad Saeeduddin 2012年
3
最初の提案は現在の実装です。私はビヘイビアを使用して構造を提供しているので、それをしたくありません。構造には構造を使用したいです（JSONが必要な場合は、JSONを取得します）。2番目の提案は必要ありません（初期化プロセスにこのデータが必要です）。
— chuckE 2012年
1
<script>タグまたはAJAXを介した@ChuckEでも、追加のHTTPリクエストが完了するまで待つ必要があります。「src」属性を使用してスクリプトをフェッチすると、ブラウザはスクリプトの内容を読み取ることができないため、唯一の代替手段はAJAXリクエストを作成することです。
— とがった2012年
3
<script>タグを介した@Pointyは、ダウンロードされるとすぐに評価されます。jsonスクリプトをjsスクリプトの前に配置すると、jsonスクリプトデータはjsスクリプトデータの前に評価されます。つまり、待つつもりはなく、データはすでに存在します。それが私の唯一の選択肢であることについて、私はあなたに同意する前にいくつかの公式文書を見たいと思います（あなたが間違っていると言っているのではなく、それが私が質問を書いた理由です）。
— chuckE 2012年
2
「ページの読み込み後のリモートJSONリクエストも、提案したい場合はオプションではありません。」... JSONリクエストは、によって送信されるリクエストとどのように大きく異なり<script src=""></script>ますか？どちらもサーバーに対してGET呼び出しを実行します。
— ベンレッシュ2012年

回答:

114

申し訳ありませんが、そのようなJSONをロードすることはできません。

「なぜここで使えないのsrc？こんなものを見たことがある…」とお考えの方もいらっしゃると思います。

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

...簡単に言えば、それはデータホルダーとして「悪用」されているスクリプトタグだけでした。あなたはあらゆる種類のデータでそれを行うことができます。たとえば、多くのテンプレートエンジンは、スクリプトタグを利用してテンプレートを保持します。

リモートファイルからJSONをロードするためのオプションの短いリストがあります。

  1. $.get('your.json')または他のそのようなAJAXメソッドを使用します。
  2. グローバル変数をjsonに設定するファイルを作成します。（ホーキーのようです）。
  3. それを非表示のiframeにプルし、ロード後にその内容をスクレイプします（これを「1997モード」と呼びます）
  4. ブードゥー教の司祭に相談してください。

最後のポイント：

提案したい場合は、ページの読み込み後のリモートJSONリクエストもオプションではありません。

...それは意味がありません。AJAXリクエストと、処理中にブラウザから送信されるリクエストの違い<script src="">は基本的に何もありません。どちらもリソースに対してGETを実行します。HTTPは、スクリプトタグまたはAJAX呼び出しが原因で実行されたかどうかを気にせず、サーバーも気にしません。

— ベンレッシュ
ソース
5
素晴らしい答え。「スクリプトタグが「悪用されている」」と言うとき、それはスクリプトタグの間違った（おそらく間違っていないが「創造的な」）使用を意味しますか？あなたのn。2つのオプションは、私たちがすでに本番環境で使用しているオプションです。純粋な実験から、厳密にjson / no-jsソリューションを探していました（確かに不可能であると確信しています）。最後のポイントに関しては、onloadイベントの前にこの情報が必要であり、初期化全体を、完了時間が異なる可能性のある非同期要求に依存させたくありません。これが、Ajax呼び出しとスクリプトタグの主な違いです。
— chuckE 2012年
1
いいえ、それが「間違っている」とは思いません。言うまでもなく、ただ...「創造的」はおそらくそれを表す良い言葉です。実際にJSONを<script>タグに書き込むことが可能であれば、私はそのルートに行くと思います。
— ベン・レッシュ
ええ、全体の課題は、スクリプトタグのsrc属性を使用してそれをロードし、ドキュメント内のこの情報を「難読化」することでした。
— chuckE 2012年
ええと、クライアント側のブラウザアプリでユーザーからデータを実際に隠すことはできません。ブラウザの開発ツールにアクセスして、JavaScriptにブレークポイントを設定し、オブジェクトを好きなように調べることができます。
— ベンレッシュ2012年
1
@Jaydipsinhの場合は、CORSの問題を解決し、Ajaxを使用する必要があります。ブラウザがこの種の動作を許可しないのには理由があります。ほとんどのブラウザでは、iframeを使用してCORSをハックすることさえできなくなりました。
— ベンレッシュ2013
14

別の解決策は、サーバーサイドスクリプト言語を利用し、json-dataをインラインで含めることです。PHPを使用する例を次に示します。

<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>

上記の例では、タイプがapplication/json。の追加のスクリプトタグを使用しています。さらに簡単な解決策は、JSONをJavaScriptに直接含めることです。

<script>var jsonData = <?php include('stuff.json');?>;</script>

追加のタグを使用したソリューションの利点は、JavaScriptコードとJSONデータが互いに分離されていることです。

— リーロゼマ
ソース
+テキストコンテンツの場合。.htmlはスクリプトタグでは機能しません
— Seth McClaine 2017
9

これは不可能であるか、少なくともサポートされていないようです。

HTML5仕様から：

（スクリプトではなく）データブロックを含めるために使用する場合、データはインラインで埋め込む必要があり、データの形式はtype属性を使用して指定する必要があり、src属性は指定しないでください。また、script要素の内容は準拠している必要があります。使用されるフォーマットに対して定義された要件に準拠します。

— btx9000
ソース
1
JSやCSSよりも機密性の高いデータを処理するポリシーのようです。
5

現在、scriptタグでは不可能ですがiframe、同じドメインからのものであれば可能です。

<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>

上記を使用するには、idandsrc属性を必要なものに置き換えるだけです。id（に等しい私たちはこのような状況でと仮定しますmySpecialId保存するために）使用されるデータをにwindow.jsonData["mySpecialId"]。

つまり、スクリプトをid使用するすべてのiframeについて、onloadそのデータが指定されたオブジェクトに同期的に読み込まれます。window.jsonDataid

私はこれを楽しみのために、そしてそれが「可能」であることを示すために行いましたが、それを使用することはお勧めしません。

代わりにコールバックを使用する代替方法を次に示します。

<script>
    function someCallback(data){
        /** do something with data */
        console.log(data);

    }
    function jsonOnLoad(callback){
        const raw = this.contentWindow.document.body.textContent.trim();
        try {
          const data = JSON.parse(raw);
          /** do something with data */
          callback(data);
        }catch(e){
          console.warn(e.message);
        }
        this.remove();
    }
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>

Chromeでテストされ、Firefoxで動作するはずです。IEまたはSafariについて不明です。

— ケミコファゴースト
ソース
3

私はベンに同意します。単純なJSONファイルをロード/インポートすることはできません。

しかし、絶対にそれを行い、jsonファイルを更新する柔軟性がある場合は、

my-json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

index.html

<head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>
— カラン
ソース
2

この答えを確認してください：https：//stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
— L.グリロ
ソース
3
$ .getJSON（）はajax呼び出しです。
— Tobi G.
コンソールではなく、リンクされたHTMLファイルで情報を表示するにはどうすればよいですか？
— T.Doe 2017
2

別のドメインからJSONをロードする必要がある場合：http ： //en.wikipedia.org/wiki/JSONP
ただし、潜在的なXSSI攻撃に注意してください：https：//www.scip.ch/en/？labs.20160414

同じドメインの場合は、Ajaxを使用してください。

— Vitaliy Kaplich
ソース
2
JSONPは、JSON形式の結果では機能しません。また、スクリプトに引数として渡されるJSONPパラメーターは、サーバーによって定義されます…アクセスできない可能性があります。
— e-sushi
1

このようなものをスクリプトファイルに配置します json-content.js

var mainjson = { your json data}

次に、スクリプトタグから呼び出します 

<script src="json-content.js"></script>

その後、次のスクリプトで使用できます

<script>
console.log(mainjson)
</script>
— ホセインセディギアン
ソース
0

javascript内で正確なjsonを使用する別の方法。Javascript Object Notationであるため、json表記を使用してオブジェクトを直接作成できます。これを.jsファイルに保存すると、アプリケーションでオブジェクトを使用できます。これは、アプリの他の部分とは別にファイルにキャッシュしたい静的jsonデータがある場合に便利なオプションでした。

    //Just hard code json directly within JS
    //here I create an object CLC that represents the json!
    $scope.CLC = {
        "ContentLayouts": [
            {
                "ContentLayoutID": 1,
                "ContentLayoutTitle": "Right",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png",
                "ContentLayoutIndex": 0,
                "IsDefault": true
            },
            {
                "ContentLayoutID": 2,
                "ContentLayoutTitle": "Bottom",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png",
                "ContentLayoutIndex": 1,
                "IsDefault": false
            },
            {
                "ContentLayoutID": 3,
                "ContentLayoutTitle": "Top",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png",
                "ContentLayoutIndex": 2,
                "IsDefault": false
            }
        ]
    };
— DominicTurner
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.