如何从 html 文件中获取保存的数据？

Question

I have some data saved inside the html file, which looks like this:我在 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>

the data is saved locally inside the data.html file.数据本地保存在data.html文件中。
Now, I'm trying to load the data into a separate app.js file:现在，我正在尝试将数据加载到单独的app.js文件中：

I initially tried accessing the document directly:我最初尝试直接访问document ：

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

But that jsut returns as undefined so then I tried the following:但是那个 jsut 返回undefined ，所以我尝试了以下操作：

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

 getData();

But that just returns the following error:但这只会返回以下错误：

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

Any idea how to go about this?知道如何 go 关于这个吗？

Answer 1

First off, adding custom, arbitrary properties to the document is not recommended, as in:首先，不建议向document添加自定义的任意属性，如下所示：

document.__data = { ... };

instead do something like eg而是做类似的事情

var data = { ... };

Now, assuming you want to access the inline data using an external app.js file, that file needs to be loaded after your inline one, or else it will come back undefined .现在，假设您想使用外部app.js文件访问内联数据，该文件需要在您的内联文件之后加载，否则它将返回undefined 。

So this is how it needs to look like in your HTML:这就是它在 HTML 中需要的样子：

<head>
</head>

<body>

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

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

</body>

And your app.js还有你的app.js

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

getData();

If your external app.js loads within the head , as in your original HTML, you need to delay the getData() until the DOM is ready, and this is how it needs to look like in your app.js :如果你的外部app.js在head中加载，就像你原来的 HTML 一样，你需要延迟getData()直到 DOM 准备好，这就是它在你的app.js中的样子：

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

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

    getData();

});

And the reason is simply that you can't access what comes later in the document as it is not loaded yet, hence the undefined issue in your first sample.原因很简单，您无法访问文档中稍后出现的内容，因为它尚未加载，因此在您的第一个示例中存在undefined的问题。

Below two snippets use inline script so you can see how it works.下面的两个片段使用内联脚本，因此您可以看到它是如何工作的。 Just replace the getData() part with your app.js and it will work as well.只需将getData()部分替换为您的app.js 。

Showing it does work when DOMContentLoaded is finished.当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>

Showing it does not work when not delayed until DOM is finished在 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