html显示本地文本文件内容
时间: 2023-08-18 16:07:14 浏览: 60
要在 HTML 页面中显示本地文本文件的内容,可以使用 JavaScript 来读取文本文件,然后将文本内容显示在 HTML 页面中。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示本地文本文件内容</title>
</head>
<body>
<pre id="text-container"></pre>
<script>
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 指定要读取的文件的路径
xhr.open("GET", "file.txt", true);
// 指定响应类型为文本
xhr.responseType = "text";
// 响应加载成功时,将文本内容显示在页面中
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById("text-container").textContent = xhr.response;
}
};
// 发送请求
xhr.send();
</script>
</body>
</html>
```
上面的代码中,我们创建了一个 XMLHttpRequest 对象,并指定要读取的文件的路径。然后,我们将响应类型设置为文本,并在响应加载成功时,将文本内容显示在页面中。
注意:在本地文件系统中使用 XMLHttpRequest 对象时,需要使用一些特殊的安全设置,否则会遇到跨域请求的问题。因此,最好将 HTML 文件和文本文件放在同一个目录下,以避免这个问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)