如何使用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文件。
相关·内容
2回答
如何使用Vanilla Javascript将一个html文件包含在另一个html文件中？
javascript、html
我想用纯Vanilla Js创建一个单页面web应用程序，而不是React Js或其他。我想要的是当我点击一个菜单链接时，我希望它包含另一个html文件并显示结果，而不需要重新加载。这是我用jQuery做的一件事： $('.link-about').click(function(){}); 如上所示，它的工作原理是单击一个<
浏览 16提问于2021-01-08得票数 0
回答已采纳
1回答
我可以通过Javascript在非React环境中包含单个React组件吗？
javascript、reactjs
我想要实现的是通过Javascript将单个react组件动态添加到vanilla (或任何其他项目)的能力。有没有一种方法可以将该文件包含在一个不相关的项目中，或者包
浏览 4提问于2018-02-19得票数 0
1回答
Tilt.js在Vue 3中的应用
html、css、vuejs3
我正在使用Vue3 +类型记录构建一个应用程序，并且已经找到了关于tilt.js的内容。我读到了将它包含在项目中的多种方法，但是当我将data-tilt添加到HTML元素时，我尝试过的任何一种方法似乎都不起作用。1. index.html references <script src="ht
浏览 27提问于2022-10-21得票数 1
回答已采纳
1回答
如何使用Javascript将HTML文件包含在另一个HTML文件中？
javascript、html
无论何时尝试在chrome中打开，我都会收到HTTPS错误，Chrome阻止了安全。document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) if (z[i].getAttribute("w3-include-html")) { file = z[i].getAttribute("w3-include-html&q
浏览 0提问于2016-07-19得票数 0
1回答
建筑材料-带有browserify的ui
javascript、npm、browserify、material-ui
我正在尝试构建material-ui (material-ui.com) javascript，这样我就可以将它包含在我的项目中并使用react组件。我一直使用browserify将所有的javascript打包成一个文件，然后将其包含在我的HTML文件中。因此，在material-ui/lib目录(这似乎是JSX转换的JS所在的目录--我对NPM包+
浏览 1提问于2015-02-21得票数 1
2回答
在标准JS文件中包括节点模块
javascript、node.js
我希望使用以下方法将节点模块包含到标准javascript文件中：但是这不起作用，当我稍后使用包来做一些事情时，它说没有定义swal我尝试将其包含在html中的脚本标记中，但也失败了：
<script type="module" src="sweetalert2.all
浏览 0提问于2018-11-13得票数 0
回答已采纳
8回答
部署网站时内联所有JavaScript是否有益
javascript、html、deployment
在我们的超文本标记语言页面中，我们有一个标签列表要加载到许多(小) JavaScript源文件中。对于部署，我们计划将单个JavaScript文件连接到一个捆绑包中，该捆绑包将包含在HTML页面中，以节省“昂贵”的HTTP请求。但是，如果只是将所有的JavaScript直接写
浏览 0提问于2012-03-22得票数 1
回答已采纳
1回答
如何将WASM npm模块与vite结合在一起？
svelte、webassembly、vite、wasm-pack
我正在使用vite运行一个svelte应用程序，并有一个用wasm-pack --target web构建的WASM包。如果我直接与vanilla JS一起使用这个包，我可以编写如下内容： import init, { greet } from "./pkg/compiler.js";
浏览 22提问于2022-06-11得票数 1
回答已采纳
1回答
Webpack -只在开发包中包含css (不包括生产)
reactjs、webpack、webpack-dev-server
当我创建我的产品包时，我不需要javascript中的任何样式表，它们都包含在index.html中。样式表是用从sass到bundle.css的咕噜表编译的。在开发过程中，我使用webpack开发服务器。现在，我希望将css包含在javascript包中，用于替换热模块，但不需要更改任何现有的javascript文件。开发服务
浏览 4提问于2016-05-10得票数 0
回答已采纳
1回答
(Symfony4中的Javascript)-路径函数不起作用
ajax、symfony、url、path
{{ path }}函数在JavaScript中使用时，在Symfony 4中不起作用。debug:router 产生： add_post_comment ANY ANY ANY /comment/add/post 在我的JavaScript文件中，下面是我的AJAX调用： $.ajax({
url: "{{ path('/comment/add
浏览 12提问于2018-12-21得票数 0
将HTML文件包含在另一个HTML文件中，而不使用任何javascript、php。请给我引路好吗？
浏览 19提问于2016-07-26得票数 0
1回答
如何将html模板包含到另一个带有javascript的html中
javascript、python、django、templates、include
我有一个名为html的main.html页面，它是用base.html扩展的。我喜欢找到一个解决方案，如何将另一个html模板(individual_sum.html)也包含在其中。individual_sum.html在文件中有很多javascript代码。我不使用外部javascript文件</em
浏览 3提问于2021-05-14得票数 0
回答已采纳
1回答
如何使用Angularjs将html文件包含在另一个html文件中
angularjs
我有一个index.html文件和另一个topBar.html文件，我想将该文件包含在我的index.html中。我的目录结构如下： scripts/ topBar.html这是我试过的代码
<div ng-controller="m
浏览 0提问于2017-10-27得票数 3
回答已采纳
4回答
在jQuery中使用带有注入超文本标记语言的元素中的Javascript
javascript、jquery、dom、xhtml、code-injection
我正在尝试通过jQuery的.load()函数在远程加载(注入)的HTML文件中引用一些javascript文件。我试图在加载的HTML文件中使用的javascript文件已经包含在加载的HTML的父HTML页面中。最初，我认为在加载的HTML中引用这些文件会很好地工作，因为它包含在<
浏览 0提问于2009-06-03得票数 1
5回答
如何从js.file内部的外部文件中包含js函数？
javascript
在file1.js中，函数中需要调用一个函数，该函数实际上包含在file2.js中。谢谢函数back(){
如果(步骤！
浏览 12提问于2009-11-02得票数 0
回答已采纳
1回答
Visual、ASP.Net (.Net框架)和在项目中包含已安装的NuGet包
javascript、c#、asp.net、visual-studio、nuget
我在VisualStudio2017中有一个ASP.Net (.Net框架) MVC web应用程序，它主要由JavaScript组成。我使用NuGet安装了一个包(特别是包)。文档接着说，我应该将JavaScript包含在我的HTML页面中，但是在检查NuGet到底做了什么之后，我不知道如何继续下去。我已经检查了我的packages.config文件</
浏览 2提问于2017-07-07得票数 0
回答已采纳
4回答
将HTML加载到Javascript中，就像加载文档一样
javascript、html
将javascript包含到html文件中很容易，但是否可以走另一条路呢？如果我有一个test.html文件 <html><script></script><body>
&
浏览 46提问于2021-08-26得票数 2
回答已采纳
1回答
将pug模板编译为单个客户端js文件
javascript、pug
我刚开始和帕格合作，并且正在用它做一个小的页面应用程序。我使用编译成javascript函数的模板，我将在SPA中使用这些函数来呈现HTML。使用pug，我能够生成多个.js文件，每个文件都包含所需的模板函数。但是，我不想编译多个javascript文件，而是将所有函数合并到一个简单的'template.js‘文件中，然后我可以从我的客
浏览 1提问于2018-08-28得票数 1
回答已采纳
5回答
使用光标填充表单中的第一个字段
javascript、html、focus
有没有一种方法可以标记一个要由浏览器光标填充的字段(就像这个页面加载时光标已经在上面的标题字段中一样)。
谢谢你，贾尔斯
浏览 0提问于2010-11-27得票数 1
3回答
如何将javascript和html拆分成多个文件
javascript、html、file
我用的是PHP，HTML和jQuery。假设这是我最初工作的"index.html“<script><script type="text/<e
浏览 0提问于2012-02-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
