Wie zum extrahieren von hash-substring-Werte von Fenster.Lage und schreiben Sie Sie in HTML?

Sind Sie nur Interesse an der ersten von den 3 Parametern verwenden:

GetURLParameter('source');

Wenn Sie möchten, dass alle 3 Parameter, und Sie kennen die Namen, die Sie verwenden können:

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

Diejenigen hinzuzufügen, die vars zu der Seite, können Sie fügen Sie Sie in divs wie diese:

<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>

Version Abfragen jedes der 3 tags und erstellt ein neues div in der Seite für diesen tag mit dem tag-Wert als Inhalt.

Es fügt auch eine CSS-Klasse, query-string-Parameter zu diesen divs, so dass Sie können den Textstil - vermutlich werden Sie das tun wollen, und fügen Sie mehr HTML-Code, um die einzelnen div-denn es ist nicht klar, warum der text wird angezeigt.

Wenn Sie nicht wissen, die Abfrage-string-Schlüssel im Voraus (Quelle, medium und Kampagne), könnten Sie eine Funktion verwenden, die ich erstellt habe, GetAllURLParameters, dass gibt ein array von Objekten mit der Taste ("Quelle") und der Wert ("FOO") für jede param.

Das würde dann so Aussehen:

<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>

Was dann zeigt die Namen und Werte aller Abfrage-Parameter.

UPDATE

Da Sie bereits hardcoded HTML-Code, sieht wie folgt aus:

<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 />

Am einfachsten legen Sie Ihre Werte wäre zum hinzufügen einer id zu jedem dieser umfasst:

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

Dann, nachdem Sie die Abfrage der Parameter, können Sie Sie wie folgt:

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;

InformationsquelleAutor Sam Baker