时间戳

首页 > 解决方案 > 如何使用 Vanilla Javascript 在另一个 html 文件中包含一个 html 文件？

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

问题描述

我想用纯 Vanilla Js 创建一个单页 Web 应用程序，而不是 React Js 或其他。我想要的是当我单击菜单链接时，我希望它包含另一个 html 文件并显示结果而无需重新加载。我include(), get(), load()在 jQuery 中做到了。但如果可能的话，我想用纯香草 Js 来做，即使有一些技巧。

这是我用 jQuery 做的一件事：

$('.link-about').click(function(){
 $('.my-div').load('about-page.html');
});

如上所示，它应该如何工作是我单击一个链接并加载另一个 html 文件。

标签： javascripthtml

解决方案

尝试这个

<!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>

推荐阅读