[解決済み] DOMに任意のJSONを埋め込むためのベストプラクティス?
2022-07-31 20:40:52
質問
DOMに任意のJSONを埋め込もうと思っているのですが、このようなことは可能でしょうか?
<script type="application/json" id="stuff">
{
"unicorns": "awesome",
"abc": [1, 2, 3]
}
</script>
これは、任意の HTML テンプレートを DOM に保存して、後で JavaScript テンプレートエンジンで使用する方法と似ています。この場合、後でJSONを取得し、それを使ってパースすることができます。
var stuff = JSON.parse(document.getElementById('stuff').innerHTML);
この作品 しかし、これは最良の方法なのでしょうか?これはベストプラクティスや標準に違反していますか?
注: 私は、DOM に JSON を格納するための代替手段を探しているわけではありません。私はそれを行うための最良の方法を探しているだけです。
どのように解決するのですか?
オリジナルの方法がベストだと思います。HTML5仕様では、この用途に対応しています。
データブロック(スクリプトとは対照的)を含めるために使用する場合、データはインラインで埋め込まれなければなりません。 はインラインで埋め込まれなければならず、データの形式は type 属性で指定しなければなりません。 src 属性は指定してはいけません。 script 要素のコンテンツは、使用される形式に定義された要件に適合していなければなりません。 の要件に適合していなければなりません。
こちらをお読みください。 http://dev.w3.org/html5/spec/Overview.html#the-script-element
まさにその通りだ。何が気に入らないのか?属性データで必要な文字エンコーディングがない。好きなようにフォーマットできる。表現力があり、使用目的が明確である。ハッキングのように感じない(例えば、CSSを使って"carrier"要素を隠すような感じ)。完全に有効です。
関連
-
[解決済み] 正しいJSONコンテンツタイプは何ですか?
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] 1...N を含む配列の作成方法
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] 正しい」JSONの日付形式とは?
-
[解決済み] DOM要素が現在のビューポートで表示されているかどうかを確認するにはどうすればよいですか?
-
[解決済み] JSON APIのレスポンス形式には規格がありますか?
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML属性の長さに限界はありますか?
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ