开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用Vanilla Javascript将一个html文件包含在另一个html文件中？

使用Vanilla Javascript将一个HTML文件包含在另一个HTML文件中可以通过以下步骤实现：

创建一个包含要包含的HTML文件的容器元素，例如一个<div>元素，给它一个唯一的ID，例如"content"。

<div id="content"></div>

在包含HTML文件的主文件中，使用Vanilla Javascript获取容器元素的引用。

const container = document.getElementById("content");

使用Ajax或Fetch API加载要包含的HTML文件。

const request = new XMLHttpRequest();
request.open("GET", "path/to/your/html/file.html", true);
request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
    container.innerHTML = request.responseText;
  }
};
request.send();

将加载的HTML文件的内容插入到容器元素中。

container.innerHTML = request.responseText;

完整的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>包含HTML文件示例</title>
</head>
<body>
  <div id="content"></div>

  <script>
    const container = document.getElementById("content");
    const request = new XMLHttpRequest();
    request.open("GET", "path/to/your/html/file.html", true);
    request.onreadystatechange = function() {
      if (request.readyState === 4 && request.status === 200) {
        container.innerHTML = request.responseText;
      }
    };
    request.send();
  </script>
</body>
</html>

这样，加载的HTML文件的内容就会被包含在主文件中的指定容器元素中。请注意，这种方法只适用于同源的HTML文件。

相关搜索:HTML -索引html无法访问另一个文件夹中的另一个html文件在另一个html文件中包含html部分在将markdown转换为html时，将javascript文件包含在pandoc中如何使用express从另一个文件夹中获取html文件？如何使用html/javascript流式传输mkv文件？如何使用JavaScript/jQuery修改另一个文件中的HTML 如何使用Javascript包含/插入HTML文件如何使用Javascript将Outlook邮件文件转换为Html。如何使用Javascript文件刷新/重新加载HTML文件中的div？如何使用jQuery将jsp文件包含在另一个jsp文件中

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

6个常见的 PHP 安全性攻击

了解常见的 PHP 应用程序安全威胁，可以确保你的 PHP 应用程序不受攻击。因此，本文将列出 6 个常见的 PHP 安全性攻击，欢迎大家来阅读和学习。 1、SQL 注入 SQL 注入是一种恶意攻击，用户利用在表单字段输入 SQL 语句的方式来影响正常的 SQL 执行。还有一种是通过 system()或 exec()命令注入的，它具有相同的 SQL 注入机制，但只针对 shell 命令。 $username = $_POST['username']; $query = "select * from

01

6个常见的 PHP 安全性攻击

了解常见的PHP应用程序安全威胁，可以确保你的PHP应用程序不受攻击。因此，本文将列出 6个常见的 PHP 安全性攻击，欢迎大家来阅读和学习。　　1、SQL注入　　SQL注入是一种恶意攻击，用户利用在表单字段输入SQL语句的方式来影响正常的SQL执行。还有一种是通过system()或exec()命令注入的，它具有相同的SQL注入机制，但只针对shell命令。 $username = $_POST['username']; $query = "select * from auth

05

ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap

作为一名Web开发者而言，如果不借助任何前端框架，从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows Form的开发者而言，更是难上加难。正是由于这样的原因，Bootstrap诞生了。Twitter Bootstrap为开发者提供了丰富的CSS样式、组件、插件、响应式布局等。同时微软已经完全集成在ASP.NET MVC 模板中。 Bootstrap结构介绍你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap。解压文件夹后，可以

WebAssembly简介

WebAssembly[1]，也称为Wasm，是一种web优化的代码格式和API（应用程序编程接口），可以极大地提高网站的性能和功能。WebAssembly的1.0版本于2017年发布，并于2019年成为W3C官方标准。

01

ASP.NET MVC的客户端验证：jQuery的验证

之前我们一直讨论的Model验证仅限于服务端验证，即在Web服务器根据相应的规则对请求数据实施验证。如果我们能够在客户端（浏览器）对用户输入的数据先进行验证，这样会减少针对服务器请求的频率，从而缓解W

09

Kali Linux Web渗透测试手册(第二版) - 6.1

thr0cyte，Gr33k，花花，MrTools，R1ght0us，7089bAt，

02

Kali Linux Web渗透测试手册(第二版) - 6.1 - 寻找文件包含漏洞

thr0cyte，Gr33k，花花，MrTools，R1ght0us，7089bAt，

04

在 HTML 中包含资源的新思路[每日前端夜话0xC3]

注意：这篇文章描述了一种我们仍需要测其试性能影响的实验技术。它可能最终会成为一种有用的工具，也有可能成为不被推荐的做法。无论哪种方式，它对我们来说很有吸引力！

03

7-进军 angular1.x 表单和事件、模块

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

02

给前端开发者的 14 个 JavaScript 代码优化建议

JavaScript 已经成为当下最流行的编程语言之一。根据 W3Tech，全世界几乎 96% 的网站都在使用它。

01

从Rust到远方：ASM.js星系

来源: https://mnt.io/2018/08/28/from-rust-to-beyond-the-asm-js-galaxy/

02

微软开源全新的文档生成工具DocFX

微软放弃Sandcastle有些年头了,微软最近开源了全新的文档生成工具DocFX，目前支持C＃和VB，类似JSDoc或Sphinx，可以从源代码中提取注释生成文档之外，而且还有语法支持你加入其他的文件链接到API添加额外的说明，DocFX会扫描你的源代码和附加的文件为你生成一个完整的HTML模版网站，你可以自己通过模版定制，目前已经内嵌了几个模版，包括静态的HTML页面和AngularJS页面。你还可以自己定制模版，具体参考 how to create custom template。源代码： http

08

谷歌发布 AngularJS 1.0，允许扩展HTML语法

谷歌2012年06月15日发布了一个全新的Web模板——AngularJS 1.0。谷歌称， AngularJS可以让你扩展HTML的语法，以便清晰、简洁地表示应用程序中的组件，并允许将标准的HTM

05

IntelliJ IDEA 2021.1正式发布！快来看看又有哪些神仙功能加入！

喜欢IntelliJ的玩家这两天一定很开心，因为IntelliJ IDEA 2021.1 已经正式发布！

04

如何制作自己的原生 JavaScript 路由

当你想到路由时，通常会想到类似 React 之类的库。但实际上，这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢？

02

【JS】784- 14 个 JS 优化建议

JavaScript 已经成为当下最流行的编程语言之一。根据 W3Tech，全世界几乎 96% 的网站都在使用它。关于网站，你需要知道的最关键的一点是，你无法控制访问你网站的用户的硬件设备规格。访问你的网站的终端用户也许使用了高端或低端的设备，用着好的或差的网络连接。这意味着你必须确保你的网站是尽可能优化的，你能够满足任何用户的要求。

01

【云+社区年度征文】常见漏洞测试思路总结与报告合规化

最近一直在挖洞，效果还行，感谢墨渊安全的师傅们的漏洞报告，让我学习到了更多的姿势，以预备未来的学习

05

蓝桥杯嵌入式资源及基础知识

ADC电压转换和温度转换（通过开发板上有输入电压调节电位器进行电压转换，通过核心芯片进行温度转换）

05

[翻译]Ext JS 教程-开始使用 ExtJS 4

入门

1. 需求

1.1 网页浏览器

ExtJS 4 支持所有主流的浏览器，从IE 6 到最新的谷歌Chrome。在开发期间，我们建议你使用下面这些浏览器，以获得更好的调试体验。

Ø Google Chrome 10+

Ø Apple Safari 5+

Ø Mozilla Firefox 4+ 带Firebug Web 开发插件

本教程假设你正在使用最新的谷歌 Chrome 浏览器。如果你还没有 Chrome，花点时间去下载它吧，然后去熟悉熟悉 Chrome 的开发者工具。

1.2 Web 服务器

尽管使用 ExtJS 4 并不一定需要一个本地的web 服务器，仍然强烈建议你在开发的时候能有一个，因为 XHR 在大多数浏览器上有针对本地 file:// 的cross origin 限制。如果你还没有本地的web 服务器，建议你下载并安装 Apache HTTP Server。

Ø 了解在 Windows 上面安装 Apache

Ø 了解在 Linux 上面安装 Apache

Ø Mac OS X 已经内置了apache，你可以在 System Preference > Sharing 下面的 Web Sharing 旁找到

一旦你安装好了 Apache ，你可以通过在浏览器地址栏输入 localhost 验证它是否在运行。你会看到一个表示 Apache HTTP 服务器已经成功安装并且正常运行的开始页面。

1.3 Ext JS 4 SDK

下载 Ext JS 4 SDK，把压缩包解压到一个在你的web 根路径下新建的extjs文件夹。如果你不知道web根目录在哪儿，查阅你web服务器的相关文档。Web 根路径的位置根据你操作系统的不同而有所不同，但是如果你使用的是 Apache，你一般会在：

Ø Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"

Ø Linux - "/var/www/"

Ø Mac OS X - "/Library/WebServer/Documents/"

一旦你已经完成安装，将浏览器导航至 http://localhost/extjs/index.html 。如果一个 ExtJS 4 的欢迎页面出现了，代表你已经一切就绪了。

2. 应用程序结构

2.1 基本结构

如下所列的建议尽管不是强制的，但是可以作为最佳实践指南考虑，以保持你的应用的结构条理性、可扩展性和可维护性。下面是推荐的Ext JS 应用程序结构：

- appname

- app

- namespace

- Class1.js

- Class2.js

- ...

- extjs

- resources

- css

- images

- ...

- app.js
04

WebGL中着色器shader的处理方法

WebGL中，所谓的固定渲染管线是不存在的。估计会有人问，什么是固定渲染管线？先来简单说明一下。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭