@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
お知らせ.ブログの不具合をコンプリートしました.
2025.06.01
おはようございます、ブログの不具合をコンプリートしました.今までほったらかしにしていた、検索結果のページの不具合をこの度修正しました.
どんな不具合が発生していたかと言えば、次頁へ遷移せずシングルページの次頁へ遷移するという不具合です.この不具合は自分のテンプレートを作ってからずっと今まで発生したのを知っていたけど対応を放置していた不具合になります.
ちなみに分かりにくいと思いますが、関数名のポストが複数形に置き換わっただけです…じゃ直ぐに対応出来たのではというご指摘があるかと思いますが案外気が付かないですよ.生成AIに投げてやっと「あっ」と思ったわけです.
人には先入観とかいう物があるけど今のところ、生成AIは機械的なのでそういうミスは指摘してくれます.いやー便利ですよね本当に.
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
ご指摘, シングルページ, テンプレート, ところ, ブログ, ページ, ミス, 人, 先入観, 度, 検索結果, 次頁, 気, 物, 生成, 自分, 複数形, 関数名,
ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript
2022.09.22
おはようございます、台風１４号が過ぎ去ってからいきなり秋模様ですね🫠。
さて、先日ツイートしたページ無限ループが出来る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();
}
});
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
14, dom, InfinityPageScroll, javascript, WordPress, インフィニティ, キッカケ, コード, こと, これ, サイト, スクロール, それ, ツイート, プラグイン, ページ, ポイント, ループ, 下記, 事, 作り方, 使用, 先日, 利用, 可能, 台風, 変換, 対応, 専用, 巷, 方法, 最下, 模様, 次頁, 無限, 秋, 自, 自作, 自分, 訳, 運営, 部分, 重要,