如何从window.location中提取哈希子字符串值并将它们写入HTML？

时间：2012-08-30 21:35:11

标签： javascript query-string substring window.location url-parameters

我正在尝试从window.location中提取哈希子字符串值并将其写入HTML以供用户查看，其URL语法不允许使用?作为查询字符串分隔符。

所以我正在使用这个简单的页面：

<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中没有?作为查询字符串分隔符，只是#）

...在输入按钮单击时，我得到一个成功警报（如预期），显示URL中的源“FOO”。大。

但如何获取其他两个SParamaterNames，然后如何将其作为HTML 写入页面以供用户查看，而不是返回警报？

UPDATE UPDATE UPDATE （下方）

谢谢，@ sam-baker !! ......很棒的答案。我使用了您的第一个示例，但将代码中的前两行更改为$(window).load(function() {，以便脚本运行onload，这是我的意图。

所以，我仍在使用相同的网址：

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语法在下面的代码示例中点击以下简单页面，它会将子字符串变量输出到用户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字符。希望这对你有用！

1 个答案:

答案 0 :(得分：1)

您只使用以下方式请求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，因为它不清楚为什么该文本是显示。

如果你不知道前面的查询字符串键（source，medium和campaign），你可以使用我创建的函数GetAllURLParameters，它返回一个包含键（“source”）和值的对象数组（每个参数的“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;
相关问题
最新问题