Làm cách nào để đọc JSON trong thẻ script từ JavaScript?

82

Tôi có một trang được tạo động, nơi tôi muốn sử dụng JavaScript tĩnh và chuyển cho nó một chuỗi JSON làm tham số. Tôi đã thấy cách tiếp cận này được Google sử dụng (xem Nút +1 của Google: Cách họ thực hiện? ).

Nhưng tôi nên đọc chuỗi JSON từ JavaScript như thế nào?

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

Trong JavaScript này, tôi muốn sử dụng đối số JSON {"org": 10, "items":["one","two"]}từ tài liệu HTML. Tôi không biết liệu tốt nhất nên làm điều đó với jQuery hay không.

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— Jonas
nguồn

162

Tôi sẽ thay đổi khai báo script thành này:

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

Loại ghi chú và trường id. Sau đó

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

sẽ hoạt động tốt trên tất cả các trình duyệt.

Các type="application/json"là cần thiết để ngăn chặn trình duyệt từ phân tích nó trong khi tải.

— c-cười
nguồn

Tôi muốn thẻ-script trỏ đến JavaScript, vì vậy nó không chỉ dành cho JSON. JSON chỉ là một đối số cho tập lệnh.

— Jonas

4

Theo thông số kỹ thuật HTML5: dev.w3.org/html5/markup/script.html , <script>phần tử đã xác định SRC sẽ không chứa bất kỳ thứ gì khác ngoài các dòng và / hoặc nhận xét mới. Xem "Phần tử tập lệnh có thuộc tính src chỉ được chứa:" trong liên kết ở trên. Nếu không, trình xác thực HTML sẽ khiếu nại.

— c-smile

12

@WoIIe Vì jQuery đã được TS sử dụng, hãy kiểm tra <script src="jquery-1.6.2.min.js"></script>ở đó.

— c-smile

Tôi thích cách sử dụng jquery. Ý tôi là, bạn sẽ cạo thêm bao nhiêu phần nghìn giây nữa bằng cách sử dụng vani javascript (trong trường hợp này)?

— Captain Hypertext

1

Lưu ý rằng điều này không an toàn, nó cho phép XSS, codepen.io/anon/pen/xevgEM

— felixmosh

13

Tôi đã kết thúc với mã JavaScript này để độc lập với jQuery.

var json = document.getElementsByTagName('script');
var myObject = JSON.parse(json[json.length-1].textContent);

— Jonas
nguồn

44

Tại sao không chỉ cho tập lệnh một ID và lấy nó bằng document.getElementById? Bằng cách đó, bạn không cần phải nhớ giữ nó cuối cùng. Cũng không ai khác sẽ thay đổi trang trong tương lai.

— George

2

Để đọc JSON đang <script id="myJSON">sử dụng

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

Bạn cũng có thể sử dụng các phương pháp để trỏ đến tập lệnh như 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>

Mở rộng đoạn mã

— Zekrom_Vale
nguồn

Các <script id="myJSON">thẻ cũng cần những type="application/json"thuộc tính.

— Mikael Dúi Bolinder

1

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

hoặc phát minh ra một số phương pháp khác để xác định tập lệnh.

Có thể thay vì .html()bạn có thể cần .text(). Không chắc. Hãy thử cả hai.

— Emil Ivanov
nguồn

Xin cảm ơn, nó làm việc khi tôi thay đổi json tới{"org": 10, "items":["one","two"]}

— Jonas

1

Phương pháp này là sai. Nếu một <script>thẻ có srcthì nó KHÔNG PHẢI có bất kỳ nội dung nào.

— Iharob Al Asimi