HTML/Javascript: how to access JSON data loaded in a script tag with src set
我在服务器中生成了这个JSON文件，我希望在页面可查看时可以在客户机上访问它。基本上我想要达到的是：
我的HTML文档中声明了以下标记：
1 | <script id="test" type="application/json" src="http://myresources/stuf.json"> |
其源中引用的文件具有JSON数据。正如我所看到的，数据已经被下载了，就像脚本一样。
现在，如何在javascript中访问它？我尝试过访问脚本标记，不管有没有jquery，都使用多种方法来尝试获取我的JSON数据，但不知何故，这行不通。如果JSON数据是以内联方式写入脚本的话，那么获取它的
页面加载后的远程JSON请求也不是一个选项，以防您想建议这样做。
- 不要使用JSON文件，而是使用一个将对象分配给变量的javascript文件。另一种方法是使用Ajax。
- 第一个建议是当前的实施。我不想这样做，因为我正在使用行为来交付结构。我更喜欢使用结构作为结构(如果我想要JSON，我会得到JSON)。不需要第二个建议(初始化过程需要这些数据)。
- @通过
标记或通过ajax，您仍然需要等待额外的HTTP请求完成。如果使用"src"属性获取脚本内容，浏览器将不允许您读取脚本内容，因此您唯一的选择是发出Ajax请求。 - @一旦被下载，通过标签的材料将被评估。如果我将JSON脚本放在JS脚本之前，JSON脚本数据将在JS脚本数据之前得到评估，这意味着，我不会等待，数据已经存在。关于它是我唯一的选择，我想在同意你之前看到一些正式的文件(不是说你错了，只是这正是我写这个问题的原因)。
- "页面加载后的远程JSON请求也不是一个选项，以防您希望建议这样做。"…JSON请求与
这似乎不可能，或者至少不受支持。
根据HTML5规范：
When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.
虽然目前无法使用
script 标记，但如果它来自同一个域，则可以使用iframe 。我这样做是为了好玩，并证明这是"可能的"，但我不建议使用它。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19function 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();
}
<!-- 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不确定。
检查这个答案：https://stackoverflow.com/a/7346598/1764509
1
2
3$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});- $.getjson()是一个Ajax调用。
- 如何在链接的HTML文件中而不是控制台中显示信息？
如果需要从另一个域加载JSON：http://en.wikipedia.org/wiki/jsonp网站但是，请注意潜在的XSSI攻击：https://www.scip.ch/en/？实验室20160414
如果它是同一个域，那么只需使用Ajax。
- JSONP不适用于JSON格式的结果。另外，作为脚本参数传递给脚本的JSONP参数由服务器定义…您可能无法访问。
我同意本的看法。不能加载/导入简单的JSON文件。
但是，如果您绝对想这样做，并且具有更新JSON文件的灵活性，那么您可以
MY-JSON.JS
1
2
3
4var myJSON = {
id:"12ws",
name:"smith"
}索引文件
1
2
3
4
5
6<head>
<script src="my-json.js">
</head>
<body onloadx="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
</body>另一种选择是在JavaScript中使用精确的JSON。因为它是JavaScript对象表示法，所以您可以直接使用JSON表示法创建对象。如果将其存储在.js文件中，则可以在应用程序中使用该对象。当我有一些静态JSON数据要与应用程序的其余部分分开缓存在一个文件中时，这是一个有用的选项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27//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
}
]
};