Question

我正在使用javascript构建html字符串并在其中调用函数。

myString= "<a href='#' onClick='return openfunc(400, 350, \"" + fbAppId + 
          ",\"" + singlePageUrl + ",\"" + imageUrl  + "\" )' title='Share This on Facebook' ><span class='icon-facebook'></span></a>";

但是当呈现页面时，我得到以下输出：

onclick="return openfunc(400, 350, "1714185588815613,"http://mysite/Pages/default.aspx,"http://mysite/sites/id/Attachments/63/image2.PNG" )"

正如您所看到的，在每个参数之后它都缺少"。

点击链接后，我在控制台中收到此错误。

Uncaught SyntaxError: missing ) after argument list

有没有更好的方法来构建字符串？

Answer 1

因为你没有插入"？你想念它：

myString= "<a href='#' onClick='return openfunc(400, 350, \"" + fbAppId + 
      ",\"" + singlePageUrl + ",\"" + imageUrl  + "\" )' title='Share This on Facebook' ><span class='icon-facebook'></span></a>";
//     ^                       ^
//     |_________________      |_
//                       |       |
//     a \" is missing here and here

Answer 2

你需要在fbAppId和singlePageUrl之后添加一个额外的转义引号字符

myString= "<a href='#' onClick='return openfunc(400, 350, \"" + fbAppId + 
      "\",\"" + singlePageUrl + "\",\"" + imageUrl  + "\" )' title='Share This     on Facebook' ><span class='icon-facebook'></span></a>";

Answer 3

您可能会考虑以不同的方式对此进行编码，以便您不依赖于内联JavaScript。在这个例子中，我使用了1）锚点上的id，2）一个数组和join来轻松构建字符串（无需担心转义引号），3）数据属性，4）非内联函数，它从数据属性中获取信息并返回openfunc函数。

var fbAppId = '1714185588815613';
var singlePageUrl = 'http://mysite/Pages/default.aspx';
var imageUrl = 'http://mysite/sites/id/Attachments/63/image2.PNG'

var myString = [
    '<a id="clicker" title="Share This on Facebook" ',
    'data-fbappid="',
    fbAppId,
    '" data-singlepageurl="',
    singlePageUrl,
    '" data-imageurl="',
    imageUrl,
    '"',
    '>Click me<span class="icon-facebook"></span></a>'
].join('');

它为您提供以下字符串：

<a id="clicker" title="Share This on Facebook" data-fbappid="1714185588815613" data-singlepageurl="http://mysite/Pages/default.aspx" data-imageurl="http://mysite/sites/id/Attachments/63/image2.PNG">Click me<span class="icon-facebook"></span></a>

现在将click事件分配给我们的元素：

var anchor = document.querySelector('#clicker').onclick = clicker;

哪个电话clicker。这可以防止锚点到达任何地方并从数据属性中获取相关信息：

function clicker(e) {
    e.preventDefault();
    var fbAppId = this.getAttribute('data-fbappid')
    var singlePageUrl = this.getAttribute('data-singlepageurl')
    var imageUrl = this.getAttribute('data-imageurl')
    return openfunc(400, 350, fbAppId, singlePageUrl, imageUrl);
}

A small DEMO这一切如何融合在一起。

动态构建html字符串

3 个答案: