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

Question

我想用純香草 Js，而不是 React Js 或其他創建單頁 web 應用程序。 我想要的是當我單擊菜單鏈接時，我希望它包含另一個 html 文件並在不重新加載的情況下顯示結果。 我在 jQuery 中使用include(), get(), load()完成了它。 但如果可能的話，我想用純香草 Js 來做，即使有一些技巧。

這是我對 jQuery 所做的事情之一：

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

如上所示，它應該如何工作是我單擊一個鏈接並加載另一個 html 文件。

Answer 1

嘗試這個

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

Answer 2

你可以試試這個。 我正在考慮元素有 id

<script>
    document.getElementById('link-about').onclick = function() {
        document.getElementById('my-div').innerHTML = '<object data="about.html" >'
    }
</script>

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

問題描述

2 個解決方案

解決方案1
0 2021-01-07 18:22:53

解決方案2
0 已采納 2021-01-07 18:34:28

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

問題描述

2 個解決方案

解決方案1 0 2021-01-07 18:22:53

解決方案2 0 已采納 2021-01-07 18:34:28

解決方案1
0 2021-01-07 18:22:53

解決方案2
0 已采納 2021-01-07 18:34:28