HTML / Javascript : src가 설정된 스크립트 태그에로드 된 JSON 데이터에 액세스하는 방법

Question 1

페이지를 볼 수 있으므로 클라이언트에서 액세스 할 수 있도록 만들고 싶은 서버에서 생성 한이 JSON 파일이 있습니다. 기본적으로 달성하고 싶은 것은 다음과 같습니다.

내 html 문서에 다음 태그가 선언되어 있습니다.

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

소스에서 참조 된 파일에는 JSON 데이터가 있습니다. 내가 본 것처럼 데이터는 스크립트에서 발생하는 것처럼 다운로드되었습니다.

이제 Javascript에서 어떻게 액세스합니까? JSON 데이터를 얻기 위해 다양한 방법을 사용하여 jQuery를 사용하거나 사용하지 않고 스크립트 태그에 액세스하려고 시도했지만 어떻게 든 작동하지 않습니다. 그는하기 innerHTMLJSON 데이터는 스크립트에서 인라인 작성했던 일 것입니다. 내가 달성하려는 것이 아니었고 그렇지 않습니다.

페이지로드 후 원격 JSON 요청도 옵션이 아닙니다.

Question 2

그런 식으로 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="">은 본질적으로 아무것도 아닙니다. 둘 다 리소스에 대해 GET을 수행 할 것입니다. HTTP는 스크립트 태그 또는 AJAX 호출로 인해 수행되었는지 여부와 상관없이 서버도 마찬가지입니다.

Question 3

또 다른 해결책은 서버 측 스크립팅 언어를 사용하고 단순히 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 데이터가 서로 분리되어 있다는 것입니다.

Question 4

이것이 가능하지 않거나 적어도 지원되지 않는 것처럼 보입니다.

로부터 HTML5 사양 :

데이터 블록 (스크립트와 반대) 을 포함 하는 데 사용되는 경우 데이터는 인라인으로 포함되어야하며 데이터 형식은 type 속성을 사용하여 제공되어야하며 src 속성은 지정되지 않아야 하며 스크립트 요소의 내용은 다음을 준수해야합니다. 사용 된 형식에 대해 정의 된 요구 사항에 따라야합니다.

Question 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>

위의 내용을 사용하려면 id및 src속성을 필요한 것으로 바꾸십시오 . id(우리는이 상황에서 가정합니다 이는 동일 mySpecialId상점에 사용되는) 데이터 의를 window.jsonData["mySpecialId"].

즉, id및 onload스크립트를 사용하는 모든 iframe에 대해 해당 데이터 가 지정된 아래의 개체에 동기식으로 로드 됩니다.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>

크롬에서 테스트되었으며 파이어 폭스에서 작동합니다. IE 또는 Safari에 대해 잘 모르겠습니다.

Question 6

나는 벤에 동의합니다. 단순 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>

Question 7

이 답변을 확인하십시오 : https://stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Question 8

다른 도메인에서 JSON을로드해야하는 경우 : http://en.wikipedia.org/wiki/JSONP
그러나 잠재적 인 XSSI 공격에 유의 하십시오 : https://www.scip.ch/en/?labs.20160414

동일한 도메인이면 Ajax를 사용하십시오.

Question 9

스크립트 파일에 이와 같은 것을 넣으십시오. json-content.js

var mainjson = { your json data}

그런 다음 스크립트 태그에서 호출

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

다음 스크립트에서 사용할 수 있습니다.

<script>
console.log(mainjson)
</script>

Question 10

자바 스크립트 내에서 정확한 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
            }
        ]
    };