https://www.taiseihome.jp/news/wp-content/themes/taiseihome/js/main.js

1// 特定のURLからHTMLを取得する関数
2async function fetchHTML(url) {
3    try {
4        const response = await fetch(url);
5        const html = await response.text();
6        return html;
7    } catch (error) {
8        console.error('HTMLの取得中にエラーが発生しました:', error);
9        return null;
10    }
11}
12
13async function setupPaginationLinks() {
14    let paginationLinks = document.querySelectorAll('.pagenation a');
15    paginationLinks.forEach(element => {
16        element.addEventListener('click', async (event) => {
17            event.preventDefault();
18            const link = event.target.href;
19            // let targetClass = tareget
20            await insertContentIntoNewsContent(link, target);
21            setupPaginationLinks();
22        });
23    });
24}
25
26async function insertContentIntoNewsContent(url, targetClass) {
27    const targetElement = document.querySelector(targetClass);
28    showLoading(url);
29    const htmlContent = await fetchHTML(url);
30
31    if (htmlContent && targetElement) {
32        const tempDiv = document.createElement('div');
33        tempDiv.innerHTML = htmlContent;
34
35        const newsContent = tempDiv.querySelector(targetClass);
36
37        if (newsContent) {
38            targetElement.innerHTML = newsContent.innerHTML;
39        } else {
40            console.log('取得できませんでした。');
41        }
42        hideLoading();
43    }
44}
45function showLoading(link) {
46    document.querySelector('.article_loading').classList.add('loading');
47    //.parts-tab＋20pxまでスクロールする（スクロールは一瞬で） 
48    let clickedElement = event.target
49    while (clickedElement && clickedElement.parentElement) {
50        if (clickedElement.parentElement.classList.contains('parts-tab')) {
51            return;
52        }
53        clickedElement = clickedElement.parentElement;
54    }
55    let gap = window.innerWidth <= 750 ? 20 : 120;
56
57    const tab = document.querySelector('.parts-tab');
58    const tabPosition = tab.getBoundingClientRect().top;
59    const scrollPosition = tabPosition + window.pageYOffset - gap;
60    window.scrollTo({
61        top: scrollPosition,
62        behavior: 'instant'
63    });
64}
65function hideLoading() {
66    document.querySelector('.article_loading').classList.remove('loading');
67}
68
69let tabLinks = document.querySelectorAll('.parts-tab a')
70tabLinks.forEach(element => {
71    element.addEventListener('click', async (event) => {
72        event.preventDefault();
73        //activeクラスを持っていた場合、全ての処理を中断
74        if (event.target.classList.contains('active')) {
75            return;
76        }
77
78        tabLinks.forEach((event) => {
79            event.classList.remove('active');
80        })
81        event.target.classList.add('active');
82
83        const link = event.target.href;
84        await insertContentIntoNewsContent(link, target);
85        setupPaginationLinks();
86    })
87});
88
89setupPaginationLinks(); // 初回読み込み時