href onclick请求中的Javascript传递变量答案

【问题标题】：Javascript pass variable in href onclick requesthref onclick请求中的Javascript传递变量
【发布时间】：2011-12-12 14:22:24
【问题描述】：

我知道这确实是基本的 javascript，但由于某种原因，在传递参数时，我似乎无法让链接的 onclick 函数工作。

我尝试转义引号，添加不同类型的引号并将原始变量添加为字符串。

我让它与下面一起工作，但它说“XYZ 未定义”

function renderLink(value, meta, record)
        {
            var type = record.data['name']; //value is XYZ  


            return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';
        }

function getReport(type){

    alert(type);
}

【问题讨论】：

你如何将此 HTML 插入 DOM？
record.data['name'] 是干什么用的？
返回到 extjs 网格

标签： javascript variables href

【解决方案1】：

return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';

你需要对字符串进行转义：

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';

【讨论】：

【解决方案2】：

如果您查看呈现的 HTML，您会发现问题：您的 getReport 调用如下所示：

getReport(XYZ);

我猜你想要引号，所以：

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';

...呈现：

getReport('XYZ');

Live example

有点深奥，但是当你输出一个onclick 属性作为HTML 源代码的一部分时，它当然是一个HTML 属性，这意味着你可以使用字符实体。所以你可以使用&quot;实体：

return '<a href="javascript:void(0);" onclick="getReport(&quot;'+type+'&quot;); return false;"></a>';

Live example

我指出这一点并不是因为我推荐它（我不推荐），而是因为记住 onclick 属性中真正发生的事情很有用。这是我强烈建议使用适当的事件处理程序的原因之一（例如，通过addEventListener / attachEvent，或者甚至只是在实例化后分配给a 元素的onclick 属性）。

需要注意的是，这种做法对record.data['name']的内容也是非常敏感的。例如，考虑一下如果不是XYZ 而是Tom's 会发生什么。上面第一个选项的输出将是

getReport('Tom's');

...这显然是个问题。同样，如果文本中有反斜杠，它将被视为结果中的转义字符等等——有点雷区。

如果您可以更改您的 renderLink，使其返回实际实例化的 a 元素而不是字符串，我会这样做：

function createLink(value, meta, record)
{
    var type = record.data['name'];         // Grab value as of when we were called
    var link = document.createElement('a');

    link.href = "javascript:void(0);";
    link.onclick = function() {             // Or even better, addEventListener / attachEvent
        getReport(type);
        return false;
    };

    return link;
}

这会创建一个链接和一个 closure 来访问type 而不会将其转换为文本并再次返回。（如果您不熟悉闭包，请不要担心，closures are not complicated。）

Live example

【讨论】：

【解决方案3】：

getReport 将 XYZ 作为变量而不是字符串接收，您需要将其放在引号内：

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';

【讨论】：