itsource

JavaScript에서 스크립트 태그로 JSON을 읽는 방법은 무엇입니까?

mycopycode 2023. 2. 10. 21:52
반응형

JavaScript에서 스크립트 태그로 JSON을 읽는 방법은 무엇입니까?

동적으로 생성된 페이지가 있으며 정적 JavaScript를 사용하여 JSON 문자열을 매개 변수로 전달합니다.Google에서 사용하는 접근 방식을 본 적이 있습니다(Google의 +1 버튼 참조: 어떻게 하고 있습니까?)

그런데 자바스크립트에서 JSON 문자열을 어떻게 읽어야 하나요?

<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="myscript.js">{"org": 10, "items":["one","two"]}</script>
  </head>
  <body>
    Hello
  </body>
</html>

이 JavaScript에서는 JSON 인수를 사용합니다.{"org": 10, "items":["one","two"]}를 참조해 주세요.jQuery를 사용하는 것이 좋은지, 사용하지 않는 것이 좋은지 모르겠습니다.

$(function() {
    // read JSON

    alert("the json is:")
})

스크립트 선언을 다음과 같이 변경합니다.

<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>

노트 유형 및 ID 필드.그 후

var data = JSON.parse(document.getElementById('data').textContent);

모든 브라우저에서 정상적으로 동작합니다.

type="application/json"로딩 중에 브라우저가 해석하는 것을 방지하기 위해 필요합니다.

그리고 우리가 사용하는 이유는textContent대신innerHTML또는innerText원문 Json을 읽는 것은innerHTML는 내용을 HTML로 해석하려고 합니다.이것에 의해, 퍼포먼스가 저하해, 해석 버그나 XSS 공격의 가능성이 있습니다.innerTextraw 텍스트는 취득하지 않고 대신 인간이 작성한 텍스트를 찾습니다.textContent(필요한 그대로) 순수 텍스트를 잡습니다.자세한 것은, https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent 를 참조해 주세요.innerHTML그리고.innerText나빠요.

저는 jQuery로부터 독립하기 위해 이 JavaScript 코드를 갖게 되었습니다.

var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);

에서 JSON을 읽으려면<script id="myJSON">사용하다

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON

또한 다음과 같은 방법으로 스크립트를 가리킬 수도 있습니다.document.scripts[0]

    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //Gets text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);
<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>

JSON.parse($('script[src="mysript.js"]').html());

또는 스크립트를 식별하는 다른 방법을 개발합니다.

아마 대신.html()필요할지도 몰라.text().확실하진 않다.둘 다 먹어봐.

언급URL : https://stackoverflow.com/questions/7581133/how-can-i-read-a-json-in-the-script-tag-from-javascript

반응형