Question

我有JavaScript为我的DOM计算并注入HTML，用于Facebook“赞”功能。我需要指定一个“规范”URL，因为实际的URL并不反映所有已经进行的DOM操作（由Web“页面”上的用户活动驱动）。

唉，Facebook的代码不使用我提供的URL，而是使用window.location值（其中#hash个方面会影响页面的显示，但服务器无法访问它们。无论如何......为什么FB的代码忽略了我给它的URL？

我生成了HTML：

var html = '<iframe src="http://www.facebook.com/plugins/like.php?href=' 
           + encodeURI(url) + 
           '&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=recommend&amp;font=arial&amp;colorscheme=light" style="border:none; overflow:hidden; width:270px; height:26px;"  allowTransparency="true" frameborder="0" scrolling="no"></iframe>'

Answer 1

encodeURI这里是错误的方法。它只对在URL中完全无效的字符进行编码;它只留下可能在URL中但具有特殊含义的字符。所以：

'?par1='+encodeURI('http://example/scr?par2=2&par3=3')

结束为：

'?par1=http://example/scr?par2=2&par3=3'

并且&字符充当内部外部 URL的参数分隔符，过早地结束了您传递给Facebook的URL参数。

对于查询参数名称/值或路径部分，正确的函数为encodeURIComponent()。

此外，您通过不转义属性值中的＆符号来创建无效的HTML。如果必须在字符串（*）中创建HTML，则需要HTML编码器：

function encodeHtml(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

var fburl= (
    'http://www.facebook.com/plugins/like.php'+
    '?action=recommend&href='+encodeURIComponent(url)+
    '&layout=standard&show_faces=false&width=100&font=arial&colorscheme=light'
);
var html= (
    '<iframe src="'+encodeHtml(fburl)+'" '
    'allowTransparency="true" frameborder="0" scrolling="no" '+
    'style="border:none; overflow:hidden; width:270px; height:26px;">'+
    '</iframe>'
);

（*：通常我会尽量避免这种情况，更喜欢使用DOM方法创建元素内容，因为那时你不必担心HTML转义。）

Facebook像iframe一样忽略了我指定的href

1 个答案: