几个菜鸟 Javascript 问题答案

【问题标题】：A Few Noob Javascript Questions几个菜鸟 Javascript 问题
【发布时间】：2012-09-04 23:20:05
【问题描述】：

好吧，所以我有一个网站，这一切都在一个静态页面 index.php 上运行。页面上的内容由 URL 中的变量决定。

index.php?site=home
index.php?site=forum
index.php?site=news

然后我有一些更长一点的

index.php?site=news&action=archive

我正在尝试编写一个脚本来更改我当前所在页面的导航按钮的颜色。

我正在处理的脚本获取页面的 url，使用 .search 来抓取 ? 之后的所有内容。然后我将字符串拆分并抓取第二部分（等号之后的部分），但这仅适用于具有 1 个变量的部分。

我在想一些类似于 if 语句的东西，检查解析的字符串中是否有多个“=”，以及它是否确实抓取了最后一个之后的文本。类似的东西——我是个菜鸟。

另外，我是否可以在头部使用 javascript setAttribute，或者是否需要在声明 ID/类之后？

<html>
<head>
<title>Test</title>
<style type="text/css">
.test {
color: yellow;
font-size: 5em;
}
</style>
<script type="text/javascript">
function parseUrl(url) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search;
var site=page.split("=")[1];

</script>
</head>
<body>
<ul>
<li id ="nav_home"><a href="testtest.html?site=home">Home</a>
<li id ="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li id ="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li id ="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
<li id ="nav_news"><a href="testtest.html?site=news"/>News<a/>
<li id ="nav_archive"><a href="testtest.html?site=news&action=archive"/>Archive<a/>
<script type="text/javascript">
document.getElementById("nav_" + site).setAttribute("class", "test");
</script>
</body>
</html>

【问题讨论】：

仅供参考，如果页面内容随查询字符串而变化，则它不是静态页面。
先用&分割，再用=分割
Parse query string in JavaScript的可能重复
就个人而言，如果这是我的项目，我会用 php.ini 更改导航链接。这会容易得多。 user1361154，如果你愿意，我可以发布一些示例 php 代码 :)
@CountMurphy 更不用说对搜索引擎更友好了。 +1 对服务器端的想法。

标签： javascript html css

【解决方案1】：

只想回顾一下备受赞誉的解决方案：- How can I get query string values in JavaScript?

您可能很快就想开始使用 jQuery。少跨浏览器问题，多做事，少写。

最后，将脚本放在结束正文标记之前被认为是一种好习惯。你可以考虑一下。 -- How does the location of a script tag in a page affect a JavaScript function that is defined in it?

【讨论】：

【解决方案2】：

不知道拆分的确切功能，但有两种选择： 1）拆分只是在第一次找到“=”的地方进行一次拆分。 2）split 将字符串分成多个部分，每次找到一个“=”。

假设它是第二个选项，那么您将得到一个包含所有子字符串的数组。示例：假设您有字符串“?Variable1=this&variable2=that&variable3=somethingDifferent”。如果你拆分，你会得到一个包含 4 个字符串的数组：

"?variable1"
“this&variable2”
“那个&变量3”
“不同的东西”

因此，您真正应该做的是使用“&”作为分隔符进行拆分。然后，遍历结果数组中的所有字符串，并以“=”作为分隔符进行拆分。该结果数组的第一个字符串将是您的参数（即“variable1”、“variable2”），第二个字符串是该参数的值。

【讨论】：

【解决方案3】：

我以前使用过这个脚本来获取 URL 中的变量。（这是 jquery）

    $.extend({
    getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
        }
        return vars;
      },
    getUrlVar: function(name){
    return $.getUrlVars()[name];
  } 
});
var site = $.getUrlVar('site');
var news = $.getUrlVar('news');

我在 stackoverflow 和 http://www.backbonetechnology.com/blog/jquery/jquery-get-url-variables 上看到过这个脚本

在头部设置属性应该没有问题。使用选择器即可。

document.getElementById("nav_" + site).css("class", "test");

【讨论】：

这在URL中有特殊字符时不起作用，需要使用encode/decodeURIComponent

【解决方案4】：

当您可以制作 PHP 文档并执行 $_GET["site"] 时，为什么还要使用 javascript 查看 url？这些 get 变量是通过服务器传递的，您应该利用它们。

这是一个关于 PHP 的tutorial，它更深入地解释了我在说什么，但只是为了让您了解有两种不同的方法可以使用 PHP 通过服务器传递变量。有$_GET 和$_POST。两者之间的主要区别在于您现在在网站上看到的内容。之后的一切？在 URL 中代表一个变量。如果您想在另一个 PHP 文档中获取该变量，您只需执行以下操作：

$variable = $_GET['site'];

您谈到的问题之一是在处理多个变量时。好吧，使用 PHP 这不是一个真正的问题......你只需将它存储在不同的变量中。

$variable2 = $_GET['action'];

我认为您应该能够从那里处理它。如果您需要更多帮助，请尽管询问。

【讨论】：

问题是关于在客户端上获取它
@JuanMendes，虽然确实如此，但 php 是解决他问题的更好方法。如果最终目标是学习，那么这个答案是可以接受的（也许不赞成，但可以接受）。
@CountMurphy 这就是我没有投反对票的原因。但是将它们放在客户端上并没有错，特别是对于服务器不生成 HTML 的 RIA。
@JuanMendes，对此无可争辩。我误会了，以为你投了反对票。