将字符串从html页面传递到javascript答案

【问题标题】：Passing a string from html page to javascript将字符串从html页面传递到javascript
【发布时间】：2014-10-06 16:22:31
【问题描述】：

我已经对如何将数据从网页传递到 javascript 进行了大量搜索，但我还没有找到传递字符串的解决方案。这正是我想要做的，只需将字符串传递给 java 脚本函数。以下是我的代码：

<a href = "website.html?gender='boy'">
<IMG STYLE="position:absolute; TOP:250px; LEFT:100px; WIDTH:300px; HEIGHT:300px" SRC="images/boy0023.png"/>
</a>

<a href = "website.html?gender='girl'">
<IMG STYLE="position:absolute; TOP:250px; LEFT:600px; WIDTH:300px; HEIGHT:300px" SRC="images/girl0023.png"/>
</a>

我尝试了各种方法来尝试使其正常工作，包括：删除男孩和女孩周围的 ''，使用按钮而不是精灵，在男孩和女孩周围使用 ""。所以在点击时，我被重定向到页面，我创建了一个名为性别的全局变量来保存信息，然后尝试在我的函数中使用性别：

var gender // Creates the global gender variable

init(gender){
    //code goes here
}

所以当我进入控制台并输入性别时，我没有在页面上得到我想要的结果；我收到性别未定义的消息。所以我的问题是，我在这里不明白什么，我做错了什么？

【问题讨论】：

您的意思是将变量传回服务器吗？还是您只想在用户点击<a> 链接时发生一些事情？
如果您确实想在页面重新加载后仅读取 javascript 中的查询字符串参数，请查看this question
这些答案中没有一个对您有帮助？ stackoverflow.com/questions/901115/…
@Novocaine 但 AFAIK 这只是惯例问题。我认为以上内容适用于所有浏览器。我只是不确定查询字符串中的单引号
我将尝试这些建议，如果可行，我会通知你们。澄清一下，我想单击其中一个精灵（男孩或女孩图像），并根据单击的图像，我想根据该选择加载某些数据。因此，如果我能够将性别设置为“男孩”或“女孩”（我已在控制台中手动完成），那么之后一切正常。它只是通过使用给我带来麻烦的网页来设置它。

标签： javascript html argument-passing

【解决方案1】：

您可以对 url 进行正则表达式检查。 FIDDLE

// use window.location.href instead of string (the link)
var link = "website.html?gender=girl";
var gender;
if (link.indexOf("gender") != -1) {
    gender = link.match(/.*gender=(.*)/)[1];
}

/*
var gender;
if (window.location.href.indexOf("gender") != -1) {
    gender = window.location.href.match(/.*gender=(.*)/)[1];
}
*/

【讨论】：

【解决方案2】：

为什么不像在标签的“onclick”上调用javascript函数而不是href。并在需要时使用 window.location 更改页面。参考小提琴：- http://jsfiddle.net/Lpx7epf2/5/

代码如下：- (HTML)

<a href="#" onclick="gender('boy')">
<IMG STYLE="position:absolute; TOP:250px; LEFT:100px; WIDTH:300px; HEIGHT:300px" SRC="images/boy0023.png"/></a>
<a href="#" onclick="gender('girl')">
<IMG STYLE="position:absolute; TOP:250px; LEFT:600px; WIDTH:300px; HEIGHT:300px" SRC="images/girl0023.png"/></a>

(JavaScript)

function gender(str){
    alert(str);//Use the value any way you want
    window.location="website.html?gender="+str;
}

【讨论】：

【解决方案3】：

以下解决了这个问题：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var gender = getParameterByName('gender'); // Used as global variable

function init(gender) {
    gender = getParameterByName('gender'); //For some reason only works when it is reiterated localy

【讨论】：