<!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>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme