Question

我的JavaScript应用程序使用Facebook Connect显示用户朋友的个人资料图片。

直到Facebook最近的最新更新在Safari中创建了一个错误，这个工作正常。

基本上，除非用户的朋友在他们的名字中有撇号（单引号），否则一切正常。例如，想想像奥康纳这样的爱尔兰姓氏。撇号完全打破了所有轮廓图片的渲染，而只显示轮廓。

通常在渲染fb：profile-pics时，朋友的名字会成为图片的alt和title属性的值。但是，如果使用带撇号的名称，则会发生这种情况（在此示例中使用名称Gregory O'Connor）：

<fb:profile-pic class=" FB_profile_pic_rendered FB_ElementReady">
  <!-- Notice the strange new "connor" attribute -->
  <img class=" FB_profile_pic fb_profile_pic_rendered " style="" connor="" title="Gregory O" alt="Gregory O" src="http://profile.ak.fbcdn.net/path/to/friends/profile/image.jpg">
<fb:profile-pic>

幸运的是，我的代码几乎与Facebook给出的FB.ApiClient.friends_get函数的代码相同，可以在这里找到（如果朋友的名字中有撇号，它会重现Safari错误））。

来自：http://developers.facebook.com/docs/?u=facebook.jslib.FB.ApiClient.friends_get

 <div id="profile_pics"></div>
 <script type="text/javascript">
   var widget_div = document.getElementById("profile_pics");
   FB.ensureInit(function () {
     FB.Facebook.apiClient.friends_get(null, function(result) {
       var markup = "";
       var num_friends = result ? Math.min(10, result.length) : 0;
       if (num_friends > 0) {
         for (var i=0; i<num_friends; i++) {
           markup +=
             '<fb:profile-pic size="square" uid="'
             + result[i]
             + '" facebook-logo="true">'
             + ' </fb:profile-pic>';
          }
        }
        widget_div.innerHTML = markup;
        FB.XFBML.Host.parseDomElement(widget_div);
      });
    });
  </script>

由于Facebook对这个错误保持沉默，我需要在我们的最终解决问题。我开始尝试删除撇号（由于Facebook和我们的应用程序之间的沟通和抽象层次，它很快变得丑陋），并决定我应该退一步，并就如何在这里解决这个问题寻求建议。

非常感谢提前。

修改

我想澄清一下通过Facebook调用生成的HTML的真实示例。基本上，上面的JavaScript将从上面的结果调用中获取用户ID，并从该结果生成图像的HTML。

我相信从img alt和img title中转出结果会解决这个问题，但是如何获取它的问题对我来说仍然存在。

示例：

<fb:profile-pic class=" FB_profile_pic fb_profile_pic_rendered FB_ElementReady" facebook-logo="false" linked="false" uid="6841956" size="normal">
  <img class=" FB_profile_pic fb_profile_pic_rendered" style="opacity: 1;" connor="" title="Colin O" alt="Colin O" src="http://profile.ak.fbcdn.net/v227/676/36/n6841956_271.jpg">
 </fb:profile-pic>

再次感谢！

Answer 1

与F3的答案相关，但不是试图对整个结果进行编码（请参阅以下链接以了解差异：http://xkr.us/articles/javascript/encode-compare/），您是否只能编码（或删除）单引号？

result[i].replace(/'/g,"%27")

或者，此正则表达式模式应匹配'character

的所有实例

"/'[^']*+'/"

像罗伯特一样，如果你能提供一个返回的例子，那将会有所帮助。

Answer 2

我想知道是否

...
 markup +=
   '<fb:profile-pic size="square" uid="'
         + escape(result[i])
         + '" facebook-logo="true">'
         + ' </fb:profile-pic>';
...

会起作用吗？

Answer 3

您是否拥有API调用的更新网址？问题中列出的那个似乎引用了FB JavaScript API，但我没有看到任何类似的friends_get函数。

在调用JS函数后，result [i]究竟包含了什么？您列出的标记代码表明result [i]仅出现在元素中。生成的HTML中的标记从哪里生成（具有感兴趣的title和alt属性）？

markup += '<fb:profile-pic size="square" uid="'
    + result[i]
    + '" facebook-logo="true">'
    + ' </fb:profile-pic>';

Answer 4

尝试类似

的内容

markup +=
   '<fb:profile-pic size="square" uid="' +
       result[i].replace(/'/g, "&apos;").
           replace(/"/g, "&quot;").
           replace(/\</g, "&lt;").
           replace(/\>/g, "&gt;") +
       '" facebook-logo="true">' +
       '</fb:profile-pic>';

毕竟，如果它是XML，它也可能是有效的XML，对吧？： - ）

用朋友的名字中的单引号解决bug

4 个答案: