如何從 html 文件中獲取保存的數據？

Question

我在 html 文件中保存了一些數據，如下所示：

<head>
   <script type="text/javascript" src="app.js"></script>
</head>

<body>

  <script type="text/javascript">
  document.__data = {
     id: 1,
     text: 'Test blob',
  };
  </script>
</body>

數據本地保存在data.html文件中。
現在，我正在嘗試將數據加載到單獨的app.js文件中：

我最初嘗試直接訪問document ：

const getData = () => console.log(document.__data);

但是那個 jsut 返回undefined ，所以我嘗試了以下操作：

 // app.js
 const getData = async () => {
     const request = await fetch('./data.html');
     const data = await request.json();
     console.log(JSON.stringify(data));
 }

 getData();

但這只會返回以下錯誤：

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

知道如何 go 關於這個嗎？

Answer 1

首先，不建議向document添加自定義的任意屬性，如下所示：

document.__data = { ... };

而是做類似的事情

var data = { ... };

現在，假設您想使用外部app.js文件訪問內聯數據，該文件需要在您的內聯文件之后加載，否則它將返回undefined 。

這就是它在 HTML 中需要的樣子：

<head>
</head>

<body>

  <script>
    var data = {
      id: 1,
      text: 'Test blob',
   };
  </script>

  <script src="app.js"></script>

</body>

還有你的app.js

const getData = () => console.log(data);

getData();

如果你的外部app.js在head中加載，就像你原來的 HTML 一樣，你需要延遲getData()直到 DOM 准備好，這就是它在你的app.js中的樣子：

const getData = () => console.log(data);

window.addEventListener('DOMContentLoaded', (event) => {

    getData();

});

原因很簡單，您無法訪問文檔中稍后出現的內容，因為它尚未加載，因此在您的第一個示例中存在undefined的問題。

下面的兩個片段使用內聯腳本，因此您可以看到它是如何工作的。 只需將getData()部分替換為您的app.js 。

當DOMContentLoaded完成時顯示它確實有效。

 <head> <script> const getData = () => console.log(data); window.addEventListener('DOMContentLoaded', (event) => { getData(); }); </script> </head> <body> <script> var data = { id: 1, text: 'Test blob', }; </script> </body>

在 DOM 完成之前不延遲顯示它不起作用

 <head> <script> const getData = () => console.log(data); getData(); </script> </head> <body> <script> var data = { id: 1, text: 'Test blob', }; </script> </body>

如何從 html 文件中獲取保存的數據？

問題描述

1 個解決方案

解決方案1
2 已采納 2019-10-02 11:20:13

如何從 html 文件中獲取保存的數據？

問題描述

1 個解決方案

解決方案1 2 已采納 2019-10-02 11:20:13

解決方案1
2 已采納 2019-10-02 11:20:13