Question

我尝试传递blob如下：

  $("#recordingslist").append('<li><audio src="'+url+'"></audio><a target="_blank" href="'+url+'">'+new Date().toISOString() + '.wav'+'</a><button class="btn btn-primary" onclick="sendWaveToPost('+blob+', '+exercise_id+')">Send Exercise</button></li>');

不幸的是，这不会奏效。它会在DOCTYPE上给我一个意外的标识符。

然而以下工作..

  $("#recordingslist").append('<li><audio src="'+url+'"></audio><a target="_blank" href="'+url+'">'+new Date().toISOString() + '.wav'+'</a><button class="btn btn-primary" onclick="sendWaveToPost(\''+blob+'\', '+exercise_id+')">Send Exercise</button></li>');

注意blob周围的转义字符。

有没有人有解释？这对我没有意义:(

Answer 1

blob必须包含不是有效Javascript表达式的内容。考虑blob包含a a之类的情况，然后没有引号：

sendWaveToPost(a a, 0)

而引号则为：

sendWaveToPost('a a', 0)

如果blob包含'字符并且您无法逃脱它们，您仍然可能会遇到错误。如果blob有可能包含'，那么您应该将其转义（并且还转义\个字符）：

sendWaveToPost(\'' + blob.replace(/([\\'])/g, '\\$1') + '\', ...

这解决了包含'或\的blob的问题，但是还有其他情况可能出错（例如blob中的换行符）并且转义会变得更复杂当你添加所有的情况。在生产代码中，你应该总是避免连接字符串来生成这样的代码，而是使用某种自动转义的模板。

Answer 2

我要感谢大家花时间帮助我。

我能够通过创建javascript节点来解决问题。

以下是解决方案：

  var url = URL.createObjectURL(blob);
  // This does not work, must create nodes manually
  //$("#recordingslist").append('<li><audio src="'+url+'"></audio><a target="_blank" href="'+url+'">'+new Date().toISOString() + '.wav'+'</a><button class="btn btn-primary" onclick="sendWaveToPost(\''+blob+'\', '+exercise_id+')">Send Exercise</button></li>');
  var li = document.createElement('li');
  var au = document.createElement('audio');
  var bt = document.createElement('button');

  au.controls = true;
  au.src = url;
  li.appendChild(au);
  recordingslist.appendChild(li);
  bt.textContent = "Send Exercise";

  bt.onclick =  function(){ sendWaveToPost(blob, exercise_id); }
  li.appendChild(bt);

Answer 3

根据我的评论，我可以这样做..（实际上，我只是使用Knockout，但这是一个不同的故事。）

// Using a function ensures proper closures of variables and increases
// the self-documentation of code
function createMusicItem (url, blob, exercise_id) {
  var item = $('<li><audio controls></audio><a target="_blank"></a><button class="btn btn-primary">Send Exercise</button></li>');
  item.find("> audio")
      .attr("src", url);
  item.find("> a")
      .attr("href", url)
      .text("" + new Date().toISOString() + '.wav');
  item.find("> button")
      .click(function() {
         // It's so easy to use a normal function/closure; there is no need
         // to worry about any escaping issues because no dynamic data is
         // manually shoved into a string-to-be-parsed.
         sendWaveToPost(blob, exercise_id);
      });
  return item;
}

// And then later, however the values are fetched..
var recordingList = $("#recordingslist");
recordings.forEach(function (r) {
  recordingList.append(createMusicItem(r.url, r.blob, r.exercise_id);
});

虽然这可以更加手动/明确地构建，但我发现这个形式足够清晰，而它避免了丑陋的字符串等问题，并且不得不担心＆＃34;转义＆＃34;动态数据¹。将静态数据放入HTML解析的字符串中没有问题，如图所示。

Here is an obligatory jsfiddle显示它在blob值中使用"或'等字符（任何字符可以正常），效果很好 - 简单代码，没有必要的转义，没有潜在的HTML注入。取胜。

¹手工构建HTML字符串以及混合结构和动态数据有点像不使用SQL参数化查询的过时做法;有更好的方法来处理任意数据和更有趣的问题进行探索。

Answer 4

当您撰写\'' + blob \''时，您在blob之前和之后输入了单引号。这使得你正在制作的字符串部分看起来像这样

<button onclick="sendWaveToPost('whateverWasIntheBlob', 5)" />

而不是像这个不正确的版本

<button onclick="sendWaveToPost(whateverWasIntheBlob, 5)" />

创建/追加包含带引号的blob文本的元素

4 个答案: