javascript - window.location からハッシュ部分文字列値を抽出して HTML に書き込む方法は?

Question

window.location からハッシュ部分文字列値を抽出し、クエリ文字列区切り文字としての使用を許可しない URL 構文を使用して、ユーザーが表示できるように HTML に書き込もうとしています。?

だから私はこの単純なページで作業しています:

<html>

<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(function() {
    $('#test').click(function() {
        window.location = (window.location);
        GetURLParameter('source');  
    });
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            alert(sParameterName[1]);
            return sParameterName[1];
        }
    }
} 
</script>

</html>

次のような URL でページを呼び出します。これはクライアントの window.location です。

http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED

FOO、BAR、FRED をページに書き込みたいので、ユーザーはそれを見ることができます。

?(クエリ文字列区切り文字として URL にno があることに注意して#ください。

...入力ボタンをクリックすると、URLからソース「FOO」を示す成功したアラートが(予想どおり)表示されます。偉大な。

しかし、他の 2 つの SParamaterName を取得するにはどうすればよいでしょうか。また、アラートを返すのではなく、それらを HTML としてページに書き込んでユーザーに表示するにはどうすればよいでしょうか?

UPDATE UPDATE UPDATE (以下)

ありがとう、@サムベーカー!! ... すばらしい答えです。$(window).load(function() {最初の例を使用しましたが、スクリプトがオンロードで実行されるようにコードの最初の 2 行を変更しました。これが私の意図でした。

だから、私はまだこの同じ URL を使用しています:

http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED

しかし、次のように、ハードコードされた HTML にハッシュ部分文字列の値を挿入したいと考えています。

<body>
<span class="style1">$need_source_value_here</span><br />
<span class="style1">$need_medium_value_here</span><br />
<span class="style3">$need_campaign_value_here</span><br />

span または div スタイルを HTML にハードコードすることで、各値を個別にスタイルします。

更新更新更新

解決策は次のとおりです。

この URL 構文を使用して、以下のコード例の次の単純なページにアクセスすると、部分文字列 vars がユーザー onload に出力され、ページ上の任意の場所に出力されます。

http://example.com/pagename.html#dyntext=FOO+MAN+CHU&dynterm=BAR+HOPPING&dynimage=FRED+IS+DEAD



<html>
<body>

<span id="dyntext-span" style="font-weight: bold;"></span><br />
<span id="dynterm-span" style="font-style: italic;"></span><br />
<span id="dynimage-span" style="text-decoration: underline;"></span><br />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(document).ready(function() {
        var tags = ["dyntext", "dynterm", "dynimage"];
        for (var i = 0; i < tags.length; ++i) {
            var param = GetURLParameter(tags[i]);
            if (param) {
                var dyntext = GetURLParameter('dyntext');
                var dynterm = GetURLParameter('dynterm');
                var dynimage = GetURLParameter('dynimage');
            }
        }

        var elem = document.getElementById("dyntext-span");
        var text = document.createTextNode(dyntext);
        elem.appendChild(text);
        var elem = document.getElementById("dynterm-span");
        var text = document.createTextNode(dynterm);
        elem.appendChild(text);
        var elem = document.getElementById("dynimage-span");
        var text = document.createTextNode(dynimage);
        elem.appendChild(text);     
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
}

</script>

</body>
</html>

は Firefox でサポートされていないため、クロスブラウザの問題がいくつかありました。innerTextへのクロスブラウザフォールバックを扱いたくないなどの理由でtextContent、DOM ツリーをウォークしてテキストノードを作成し、+Unicode 文字をスペースに置き換えました。これがお役に立てば幸いです。

score 1 · Accepted Answer

次を使用して、3 つのパラメーターの最初のパラメーターのみを要求しています。

GetURLParameter('source');

3 つのパラメーターすべてが必要で、名前がわかっている場合は、次を使用できます。

var source = GetURLParameter('source');
var medium = GetURLParameter('medium');
var campaign = GetURLParameter('campaign');

これらの変数をページに追加するには、次のように div に挿入できます。

<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(function() {
    $('#test').click(function() {
        // Iterate through a known list of tags
        var tags = ["source", "medium", "campaign"];
        for (var i = 0; i < tags.length; ++i) {
            var param = GetURLParameter(tags[i]);
            if (param) {
                var div = document.createElement('div');
                div.innerText = param;
                div.className = "query-string-param";
                document.body.appendChild(div);
            }
        }
    });
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);

    console.log(sPageURL);

    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
} 
</script>

</html>

そのバージョンは 3 つのタグのそれぞれを照会し、コンテンツとしてタグの値を持つそのタグのページに新しい div を作成します。

また、これらの div に CSS クラス query-string-param を追加して、テキストのスタイルを設定できるようにします。テキストが表示される理由が明確でないため、おそらくそれを行い、各 div にさらに HTML を追加する必要があります。

事前にクエリ文字列のキー (ソース、メディア、キャンペーン) がわからない場合は、私が作成した関数 GetAllURLParameters を使用できます。この関数は、キー (「ソース」) と値 (「FOO」) の両方を持つオブジェクトの配列を返します。 ) パラメータごとに。

それは次のようになります。

<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(function() {
    $('#test').click(function() {
        // Iterate through a known list of tags
        var params = GetAllURLParameters();
        for (var i = 0; i < params.length; ++i) {
            var param = params[i];
            var div = document.createElement('div');
            div.innerText = "Value of param '" + param.key + "' is '" + param.value + "'";
            div.className = "query-string-param";
            document.body.appendChild(div);
        }
    });
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);

    console.log(sPageURL);

    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
} 

function GetAllURLParameters() {
    var sPageURL = window.location.hash.substring(1);
    var params = [];
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        params.push({
            key: sParameterName[0],
            value: sParameterName[1]
        });
    }
    return params;
}
</script>

</html>

次に、すべてのクエリパラメータの名前と値が表示されます。

アップデート

すでに次のような HTML をハードコーディングしているため:

<span class="style1">$need_source_value_here</span><br />
<span class="style1">$need_medium_value_here</span><br />
<span class="style3">$need_campaign_value_here</span><br />

値を挿入する最も簡単な方法は、これらの各スパンに ID を追加することです。

<span id="source-span" class="style1"></span><br />
<span id="medium-span" class="style1"></span><br />
<span id="campaign-span" class="style3"></span><br />

次に、パラメーターをクエリした後、次のように挿入できます。

var source = GetURLParameter('source');
document.getElementById('source-span').innerText = source;
var medium = GetURLParameter('medium');
document.getElementById('medium-span').innerText = medium;
var campaign = GetURLParameter('campaign');
document.getElementById('campaign-span').innerText = campaign;

javascript - window.location からハッシュ部分文字列値を抽出して HTML に書き込む方法は?

1 に答える 1

Related

Reference