Javascript Url 参数解析

标签 javascript html url

所以,我真的需要一些帮助。我进行了广泛的搜索,我发现的一些解决方案很棒但对我不起作用,所以这里...

当有人访问我的网站时,他们将点击一个链接,该链接会将 URL 传递给“recipes.html”……例如,如果他们点击“Ancho Chile Sauce”,则 URL 将是:

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

这个参数其实就是“Recipes”文件夹中一张JPEG的名称,当然是带“.jpg”扩展名

我需要把这个参数变成一个字符串,并在它之前添加“Recipes/”,在它之后添加“.jpg”,然后在我的 html 文档中更改图像标签的来源以显示新的动态调用的食谱图像。

我以为我已经做到了,但似乎没有任何效果。显然我在我的 Javascript 中做错了什么,因为我的标记工作正常并且带有参数的 url 正在传递。

这是我的代码:

<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
<link href="mobi-styles.css" rel="stylesheet" />
<script type="text/javascript">
function getParam ( sname )
{
  var params = location.search.substr(location.search.indexOf("?")+1);
  var sval = "";
  params = params.split("&");
    // split param and value into individual pieces
    for (var i=0; i<params.length; i++)
       {
         temp = params[i].split("=");
         if ( [temp[0]] == sname ) { sval = temp[1]; }
       }
  return sval;
}
window.onload = changePic();
var param = getParam("r");
var recipeName = "Recipes/"+param+".jpg";
function changePic() {
document.getElementById("recipe").src=recipeName;
}
</script>
</head>

<body>
<img class"resizer" id="recipe" src="" />
</body>
</html>

求助!我爱你很久了!

最佳答案

删除 ()。附加事件时,您分配一个函数,而不是函数调用的结果。您所做的是调用 changePic(),返回 sval 并将 sval 的值分配给 window.onload -这是错误的。

window.onload = changePic;
                         ^---remove ()

并将 window.onload = changePic 移到底部,这样 JSLint 就不会生气了。最佳做法是在使用函数之前先在顶部声明函数,即使存在提升也是如此。

关于Javascript Url 参数解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10609511/

相关文章:

javascript - 使用 XPath 查找节点后面的文本节点

html - CSS 内联 block 充当 float

python - DefaultRouter 类没有为 python 中的所有应用程序创建 API Root View

javascript - 设置 mindate 和 maxdate 后未禁用 jquery datepicker

javascript - DataTable - 使值可排序

html - 数据:image/png in the source of an image?是什么意思

java - 如何在 JSF 项目中获取文件资源

linux - Shell 脚本 - URL 操作

javascript - 如何解决这个 Jquery 错误?

javascript - 如何找到 openlayer3 map 的 bbox 高度和宽度