おはようございます、台風１４号が過ぎ去ってからいきなり秋模様ですね🫠。
さて、先日ツイートしたページ無限ループが出来るJavaScriptコードを書きました。これを作ろうと思ったキッカケは、自分が運営しているWordPressサイトに巷のページ無限スクロールプラグインが尽く（ことごとく）使用出来なかったので自分で自作した訳です。因みにページ無限スクロールプラグインとはページを送りをしなくてもページの最下までスクロールすると次頁を読み込んでくれるプラグインの事を指します。
下記のコードは自サイト専用なのでそのまま使用することは出来ませんが、重要な部分だけ抜き取って再利用すれば、独自のページ無限ループに対応することは可能かと思います。
コードを読んで頂ければ分かることですが、重要なポイントはページを読み込む方法とそれをDomに変換する方法だと思います。まず、ページを読み込む方法は下記のファンクションで可能です。
fetch(next_url).then(
response => response.text()
).then(data => {そしてDomに置き換えている所はこの部分になります。これら２つの箇所が重要になります。
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');これらの事に注意して独自コードを書いてみてください。最後に全コードを記載しときます。
let cnt = 2;
let blk = 0;
async function nextpage() {
if (cnt !== blk) {
blk = cnt;
await (async () => {
let next_url = "https://fox-black.com/blog/page/" + cnt;
return await fetch(next_url).then(
response => response.text()
).then(data => {
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
let blogs = doc.querySelectorAll('.blogpage');
cnt++;
if (blogs[0].innerHTML !== undefined) {
document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
let str = "";
for (const key in elm) {
const element = elm[key];
if (element.innerHTML !== undefined) {
str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
}
}
return str;
})(blogs));
} else {
if (document.querySelector("#fin") === null) {
document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
}
}
}).catch(error => {
if (document.querySelector("#fin") === null) {
document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
}
});
})();
}
}
if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
window.addEventListener("scroll", async function () {
let s = (() => {
let tgt;
if ('scrollingElement' in document) {
tgt = document.scrollingElement;
} else if (this.browser.isWebKit) {
tgt = document.body;
} else {
tgt = document.documentElement;
}
return tgt;
})();
if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
await nextpage();
}
});
} else {
document.querySelector(".foxpage").addEventListener("scroll", async function () {
if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
await nextpage();
}
});
}
