ページの途中に表示するメッセージ
この質問の件。
「どんな方法でもいいので」ということなので、元のコードを修正するのではなく、動くコードを提示してみる。
↓にメッセージ。
パラメータは、質問に合わせて key で、値は大阪と広島。
お試しのリンク。
- http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=大阪
- http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=広島
- http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=東京タワー
- http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=札幌
こんな感じのコード。
(function() { var m = /\bkey=(.*?)(&|$)/.exec(location.search); if (m) { var msg = "", img_src; switch (decodeURIComponent(m[1])) { case "大阪": msg = "大阪でっせ"; img_src = "http://www.pref.osaka.lg.jp/houbun/reiki/reiki_honbun/word/k201IG00000410.jpg"; break; case "広島": msg = "広島じゃけえ"; img_src = "https://www.pref.hiroshima.lg.jp/soshiki_file/kouhou/kids/kids02-01.jpg"; break; } if (msg != "") { document.write('<p class="message-by-key">' + '<img src="http://q.hatena.ne.jp/images/icon-jinriki-og3.gif">' + '<img src="' + img_src + '">' + msg + "</p>"); } })();
今どきのコードだと、こんな感じ?
(_ => {
const message = {
"大阪" : "大阪でっせ",
"広島" : "広島じゃけえ",
};
const url = new URL(location.href);
const param = url.searchParams;
if (param.has("key")) {
const key = param.get("key");
if (message[key]) {
const c_ = document.currentScript;
c_.parentNode.insertBefore(Object.assign(document.createElement("p"), {
innerHTML: message[key],
className: "message-by-key",
}), c_.nextSibling);
}
}
})();
Internet Explorer だと、この辺りがダメ。
- Arrow functions - JavaScript | MDN
- URL() - Web APIs | MDN
- URLSearchParams - Web APIs | MDN
- Document.currentScript - Web APIs | MDN
- Object.assign() - JavaScript | MDN
もうひとつ質問きた。