HTML/Javascript: src가 설정된 스크립트 태그에 로드된 JSON 데이터에 액세스하는 방법
이 JSON 파일을 서버에서 생성하고 페이지가 표시되므로 클라이언트에서 액세스할 수 있도록 합니다.기본적으로 달성하고자 하는 것은 다음과 같습니다.
html 문서에 다음 태그가 선언되어 있습니다.
<script id="test" type="application/json" src="http://myresources/stuf.json">
소스에서 참조되는 파일에 JSON 데이터가 있습니다.제가 본 것처럼 데이터는 스크립트에서와 마찬가지로 다운로드 되었습니다.
그럼 자바스크립트로 어떻게 접속하면 되나요?jQuery 유무에 관계없이 JSON 데이터를 취득하기 위해 여러 가지 방법을 사용하여 스크립트 태그에 액세스하려고 시도했지만, 왠지 작동하지 않습니다. innerHTML입니다.json은 동작했을 것입니다.그건 내가 달성하려는 것도 아니고, 달성하려는 것도 아니야.
페이지 로드 후 리모트 JSON 요청도 권장할 수 없는 옵션입니다.
그런 식으로 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을 로드하기 위한 간단한 옵션 목록이 있습니다.
$.get('your.json')AJAX입니다.- json에 전역 변수를 설정하는 파일을 작성합니다.(호키 소리)
- 보이지 않는 iframe에 끌어다 넣은 후 내용물을 긁어냅니다(이것을 "1997 모드"라고 부릅니다).
- 부두교 신부와 상의하세요.
최종 포인트:
페이지 로드 후 리모트 JSON 요청도 권장할 수 없는 옵션입니다.
안 돼...그것은 말이 안됩니다. 처리 중 AJAX 의 .<script src="">이치노되어 .HTTP는 스크립트태그 또는 AJAX 콜에 의해 실행되는지 여부에 관계없이 서버도 마찬가지입니다.
또 다른 솔루션은 서버 측 스크립트 언어를 사용하여 json-data inline을 단순히 포함하는 것입니다.다음은 PHP를 사용하는 예입니다.
<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>
이 「」인 여분의 .application/jsonJSON 자바스크립트
<script>var jsonData = <?php include('stuff.json');?>;</script>
태그가 추가된 솔루션의 장점은 JavaScript 코드와 JSON 데이터가 서로 분리되어 있다는 것입니다.
이것은 불가능하거나 적어도 지원되지 않는 것처럼 보입니다.
HTML5 사양부터:
(스크립트가 아닌) 데이터 블록을 포함하기 위해 사용하는 경우 데이터를 인라인으로 삽입하고 데이터 형식을 type 속성을 사용하여 지정해야 하며 src 속성을 지정하지 않아야 하며 스크립트 요소의 내용은 사용되는 형식에 정의된 요건에 적합해야 합니다.
★★★★★★★★에서는 하지만,script"D" 또는 "D"로 합니다.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>
내용을 하려면 , 「」를 간단하게 .id ★★★★★★★★★★★★★★★★★」src필요한 기능을 제공합니다.id에는 ( 하면), (이렇게 하면), (이렇게 하면), (이렇게 하면), (이렇게 하면), (이렇게 하면), (이렇게 하면), (이렇게 하면), (이렇게 )mySpecialId)를 사용하여 데이터를 저장합니다.window.jsonData["mySpecialId"].
"iframe"이 id 이렇게 '어울리다'를 합니다.onload스크립트는 이 데이터를 동기화하고window.jsonData 아래 id★★★★★★★★★★★★★★★★★★.
저는 이것을 "가능"하다는 것을 보여주기 위해 재미로 한 것이지만, 사용하는 것을 추천하지는 않습니다.
대신 콜백을 사용하는 대체 방법을 다음에 나타냅니다.
<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>
크롬으로 테스트되어 파이어폭스에서 동작합니다.IE 또는 Safari가 불분명합니다.
나는 벤의 말에 동의해.단순 JSON 파일을 로드 또는 가져올 수 없습니다.
하지만 꼭 그렇게 하고 싶고 json 파일을 유연하게 업데이트할 수 있다면,
my-json.my-json.my-json
var myJSON = {
id: "12ws",
name: "smith"
}
index.displaces를 표시합니다.
<head>
<script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
<div id="json-holder"></div>
</body>
걸 .json-content.js
var mainjson = { your json data}
스크립트 태그에서 호출합니다.
<script src="json-content.js"></script>
다음 스크립트에서 사용할 수 있습니다.
<script>
console.log(mainjson)
</script>
다음 답변을 확인해 주세요.https://stackoverflow.com/a/7346598/1764509
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
다른 도메인에서 JSON을 로드할 필요가 있는 경우:http://en.wikipedia.org/wiki/JSONP
단, 잠재적인 XSSI 공격에 주의해 주십시오.https://www.scip.ch/en/ ? ?? 。 2016 0414 。
같은 도메인이면 Ajax로 해주세요.
javascript 내에서 정확한 json을 사용하는 또 다른 대안입니다.Javascript Object 표기이므로 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
}
]
};
지원되지 않지만 json을 javascript에 넣을 수 있는 일반적인 대안이 있습니다."remote json request"는 옵션이 아니라고 명시하고 있지만, 이것이 최선의 솔루션일 수 있으므로 고려해 보는 것이 좋습니다.
src Atribute가 서포트되고 있는 경우는, 리모트 json 요구를 실행하고 있기 때문에, 그것을 회피하면서, 거의 같은 방법으로 적극적으로 시도하고 있는 이유를 알 수 없습니다.
해결책:
<script>
async function loadJson(){
const res = await fetch('content.json');
const json = await res.json();
}
loadJson();
</script>
이점
- 캐시를 허용합니다.호스팅/서버가 올바르게 설정되어 있는지 확인합니다.
- 크롬에서는 성능 탭을 사용하여 프로파일링을 한 후 인라인 JS, 인라인 JSON, 외부 JS에 비해 CPU 설치 공간이 가장 작다는 것을 알게 되었습니다.
언급URL : https://stackoverflow.com/questions/13515141/html-javascript-how-to-access-json-data-loaded-in-a-script-tag-with-src-set
'programing' 카테고리의 다른 글
| int 목록용 JSON (0) | 2023.03.06 |
|---|---|
| AngularJS: 새로운 브라우저 창을 열어 범위와 컨트롤러, 서비스를 유지 (0) | 2023.03.06 |
| 오류: useHref()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다. URL을 localhost:3000/experience로 직접 입력하면 동작합니다. (0) | 2023.03.06 |
| WooCommerce - product_id별로 제품 설명을 가져옵니다. (0) | 2023.03.06 |
| Oracle 클라이언트 설치 오류 - 경로가 너무 깁니다. (0) | 2023.03.06 |