如何从 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