Question

我一直在努力使用URL变量动态更改HTML内容。让我举个例子，然后提供给我的代码到目前为止。

实施例。我有一个包含要更改内容的登录页面。我想在我的网址www.domain.com/header=new-content

中添加一个变量

我希望能够重写HTML以使用Javascript或Jquery显示新标头。这是我到目前为止所拥有的。好像我错过了触发器或if / else语句。

非常感谢你！

<script>
    var element = document.getElementById("header");
    element.innerHTML = "New Content";
    </script>

Answer 1

首先，当您处理URL参数时，应在开始定义参数之前放置?。这将导致浏览器检索页面www.foo.bar/而不是www.foo.bar/header=new-content。添加问号后，您可以使用以下代码段检索网址参数。我是从this question检索到的。

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.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>
var header = getUrlParameter('header');
document.getElementById('header').innerHTML = header;
</script>

这将检索URL参数header，并将ID为header的元素的值更改为URL中包含的值。对于网址www.foo.bar/?header=new-content，元素的值将更改为new-content。如果您想在变量中包含空格，可以通过将上面代码段中的第一行更改为此来删除URL编码的字符（例如，空格的％20）：

var header = decodeURIComponent(getUrlParameter('header'));

最后一分钟补充：我刚刚注意到在我写这篇文章的时候，另外一个或多或少有相同代码片段的答案。哎呦。：）

Answer 2

您可以使用以下函数读取网址并提取所需的参数：

function fGetUrlParameter(sParam) {
    var sPageURL = window.location.search.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];
        }
    }
};

因此，如果您要访问的网址如下： http://www.domain.com/?header=new-content

您可以将参数存储在变量

中

var stringHeader = fGetUrlParameter("header")

并修改你的元素html

 var element = document.getElementById("header");
 element.innerHTML = stringHeader;

Answer 3

我不确定我理解你的问题。假设您想使用URL传递参数，正确的方法是重写您的网址 www.domain.com?header=new-content
这将使您的名为header的变量等于new-content的值。
提取数据的方法是：

<script>
    var element = document.getElementById("header");
    //use your variable
 </script>

使用URL变量动态更改HTML内容

3 个答案: