ページの途中に表示するメッセージ


この質問の件。

「どんな方法でもいいので」ということなので、元のコードを修正するのではなく、動くコードを提示してみる。
↓にメッセージ。




パラメータは、質問に合わせて 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 だと、この辺りがダメ。




もうひとつ質問きた。

エリア1

エリア2

エリア3

エリア4

エリア5