如何使用 Vanilla Javascript 在另一个 html 文件中包含 html 文件？
[英]How to include a html file inside another html file with Vanilla Javascript?
问题描述
I want to create a single page web application with pure Vanilla Js, not React Js or another.
我想用纯香草 Js，而不是 React Js 或其他创建单页 web 应用程序。 What I want is when I click on a menu link, I want it to include another html file and show up the result without reloading.我想要的是当我单击菜单链接时，我希望它包含另一个 html 文件并在不重新加载的情况下显示结果。 I did it with include(), get(), load() in jQuery.我在 jQuery 中使用include(), get(), load()完成了它。 But I want to do it with pure vanilla Js, if possible, even though with some tricks.但如果可能的话，我想用纯香草 Js 来做，即使有一些技巧。
Here is the one of the things I did with jQuery:这是我对 jQuery 所做的事情之一：
$('.link-about').click(function(){
$('.my-div').load('about-page.html');
});
As shown above, how it should work is that I click a link and another html file loads.如上所示，它应该如何工作是我单击一个链接并加载另一个 html 文件。
2 个解决方案
解决方案1
0 2021-01-07 18:22:53
Try this尝试这个
<!DOCTYPE html>
<html>
<head lang="en" dir="ltr">
<script type="text/javascript">
async function load_home()
{
var content = document.getElementById("content");
content.innerHTML = await (await fetch('next.html')).text();
}
</script>
</head>
<body>
<div id="content"></div>
<button onclick="load_home()"> load</button>
</body>
</html>
解决方案2
0 已采纳 2021-01-07 18:34:28
You can try this.你可以试试这个。 I am considering elements has id我正在考虑元素有 id
<script>
document.getElementById('link-about').onclick = function() {
document.getElementById('my-div').innerHTML = '<object data="about.html" >'
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.