/*
* Replicates the functionality of jQuery's `load` function,
* used to load some HTML from another file into the current one.
*
* Based on this Stack Overflow answer:
* https://stackoverflow.com/a/38132775/3626537
* And `fetch` documentation:
* https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
*
* @param {string} parentElementId - The ID of the DOM element to load into
* @param {string} htmlFilePath - The path of the HTML file to load
*/
const loadHtml = function(parentElementId, filePath) {
const init = {
method : "GET",
headers : { "Content-Type" : "text/html" },
mode : "cors",
cache : "default"
};
const req = new Request(filePath, init);
fetch(req)
.then(function(response) {
return response.text();
})
.then(function(body) {
// Replace `#` char in case the function gets called `querySelector` or jQuery style
if (parentElementId.startsWith("#")) {
parentElementId.replace("#", "");
}
document.getElementById(parentElementId).innerHTML = body;
});
};
3条答案
按热度按时间h22fl7wq1#
我想你可以用以下方法做到这一点;
顺便说一句,你也可以用fetch API来实现。
顺便说一下,您可以阅读this blog post来了解一些关于fetch API的知识。
wribegjk2#
当我试图解决同样的问题时,我创建了这个基于Ali BARIN's answer的版本,看起来工作得很好,但它是一个更明确的版本,添加了
init
信息,并有一些逻辑使用document.getElementById
而不是querySelector
。knsnq2tg3#
你可以这样做,但有件事你必须注意
我想让你注意的是,如果你把URL放到一个页面上,它会把它作为字符串从
<html>
返回到</html>
,我想没有办法像jQuery中的.load()
方法那样把它分开。