Question

我有两个HTML文件， index.html 和 about.html 。我想在我的 about.html 中打开 index.html ，而不要离开 index.html 。

如果我看到，大多数网站使用 #about ，那么他们可以在 about.html <中加载 index.html / strong>将 index 中的某个div替换为 about.html 。

Answer 1

我不确定这是你想要做的，但是如果你想在索引页面的某个地方显示about.html页面，HTML中有一些名为iframe的内容： https://www.w3schools.com/html/html_iframe.asp

但是如果你想要更动态的东西，你应该按照评论中的建议来研究AJAX和类似的内容。

Answer 2

您可以通过使用纯javascript的简单Ajax请求来完成此操作。我编写了一个函数，它获取类似#about的url-hash并加载about.html，然后将整个内容放入索引页的.container元素中：

// Container of external page contents   
var container = document.querySelector('.container');

var loadWebpage = function (which) {
    which = which.slice(1);
    if (!which) return container.innerHTML = '';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', which + '.html');
    xhr.onload = function () {
        if (xhr.status === 200) container.innerHTML = xhr.responseText;
        else console.log(which + ' page not found!')
    };
    xhr.send()
};

window.onhashchange = function () {
    loadWebpage(location.hash) // When hash changes load that page
};

loadWebpage(location.hash); // When page opens load current hash page

我希望它有所帮助，祝你好运

使用hash＃而不使用leave URL打开其他URL

2 个答案: