script

Last updated at 2024-09-05Posted at 2024-09-05
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動的タイトル設定</title>
</head>
<body>
    <h1>動的タイトル設定のテスト</h1>
    <p id="output">URLパラメータを確認中...</p>

    <script>
        // ハッシュフラグメントからパラメータを取得する関数
        function getHashParameter(name) {
            const hash = window.location.hash; // ハッシュ部分を取得
            const params = new URLSearchParams(hash.substring(hash.indexOf('?') + 1)); // ハッシュからクエリ部分を解析
            return params.get(name);
        }

        // testCdの値をもとに、対応するJSONファイルからtitleを取得する関数
        async function fetchTitle(testCd) {
            const jsonFileName = `./themes/param/json/settings_${testCd}.json`;
            console.log('JSONファイル名:', jsonFileName);  // ファイル名を確認
            try {
                const response = await fetch(jsonFileName);
                console.log('レスポンス:', response);  // レスポンスの確認
                if (!response.ok) {
                    throw new Error('HTTPエラー: ' + response.status);
                }
                const data = await response.json();
                console.log('取得したデータ:', data);  // JSONの中身を確認
                return data.title;
            } catch (error) {
                console.error('JSONファイルの取得に失敗しました:', error);
                return null;
            }
        }

        // ページのロード時にタイトルを設定
        window.onload = async function() {
            console.log('ページがロードされました');
            console.log('window.location.hash:', window.location.hash);  // ハッシュ部分を確認
            const testCd = getHashParameter('testCd');  // ハッシュからtestCdを取得
            console.log('取得したtestCd:', testCd);  // 取得したtestCdを確認
            const outputElement = document.getElementById('output');

            if (outputElement) {
                if (testCd) {
                    outputElement.textContent = '取得したtestCd: ' + testCd;

                    // JSONファイルからタイトルを取得し、ページのタイトルを設定
                    const title = await fetchTitle(testCd);
                    if (title) {
                        // titleの値に応じて異なるタイトルを設定
                        if (title === "1") {
                            document.title = "1TITLE";
                        } else if (title === "2") {
                            document.title = "2TITLE";
                        } else if (title === "3") {
                            document.title = "3TITLE";
                        } else {
                            document.title = title;  // それ以外の値の場合はそのまま表示
                        }
                        console.log('設定されたタイトル:', document.title);  // 設定されたタイトルを確認
                    } else {
                        console.error('タイトルが取得できませんでした。');
                    }
                } else {
                    outputElement.textContent = 'URLパラメータ "testCd" が見つかりません。';
                }
            } else {
                console.error('ID "output" の要素が見つかりません。');
            }
        };
    </script>
</body>
</html>
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up