我刚刚在我的页面上添加了一个 Facebook Like/Send 插件。我在我的开发机器上对插件进行了质量检查，一切都很完美。当我将网站发布到我的实时网站 (http://www.raveradar.com) 时，“发送”按钮开始出现问题。
问题仅影响“发送”按钮，当您单击“发送”时会打开一个新表单，但奇怪的是此表单上的“取消”按钮不再起作用。也就是说，当单击“取消”按钮时，弹出窗体不会消失。没有错误，什么都没有。我所能想到的是，这是某种 CSS 问题，但让我感到困惑的是，这在所有浏览器中都适用于 localhost。如果这是一个 CSS 问题，我不应该遇到它吗？
非常感谢任何帮助。
HTML 标签:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
正文:
<body onload="LoadRaveRadarMap('<%=ConfigurationManager.AppSettings["bingMapsKey"].ToString() %>');">
<!-- Setup Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '<%=ConfigurationManager.AppSettings["raveRadarAppID"].ToString() %>',
channelUrl: '//ConfigurationManager.AppSettings["raveRadarDomain"].ToString() %>/scripts/channel.html',
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:servicereference Path="WcfRaveRadar.svc" />
</Services>
</asp:ScriptManager>
<div id="container">
<!-- Rave Radar Map - The source of all awesomeness! -->
<div id="raveMapContainer" class="raveMap" />
<!-- Facebook 'Like' button -->
<div id="fbLike">
<fb:like ref="top_left" href="<%=ConfigurationManager.AppSettings["raveRadarDomain"].ToString() %>" send="true" layout="button_count" width="129" show_faces="true" font="arial"></fb:like>
</div>
</div>
</form>
页面 CSS (raveRadar.css):
.raveMap {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
#fbLike {
position: absolute;
top: 35px;
z-index: 1002;
width: 129px;
编辑: 检查 Chrome 控制台后，我可以看到当我点击“取消”按钮时出现错误IS:
Unsafe JavaScript attempt to access frame with URL http://www.facebook.com/dialog/oauth?api_key=288300704552515&app_id=288300704552515&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df148fbcbb4%26origin%3Dhttp%253A%252F%252Flocalhost%253A50280%252Ff14432130c%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=288300704552515&display=none&domain=localhost&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df1d2b95ec4%26origin%3Dhttp%253A%252F%252Flocalhost%253A50280%252Ff14432130c%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df3797f333c&response_type=token%2Csigned_request%2Ccode&sdk=joey from frame with URL http://www.facebook.com/plugins/send_button_form_shell.php?api_key=288300704552515&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df8557776c%26origin%3Dhttp%253A%252F%252Flocalhost%253A50280%252Ff14432130c%26relation%3Dparent.parent%26transport%3Dpostmessage&controllerID=ut2r33_4&error=&extended_social_context=false&locale=en_US&nodeRef=top_left&nodeURL=http%3A%2F%2Fwww.raveradar.com%2F&sdk=joey. Domains, protocols and ports must match.
我在我的开发机器和我的实时网站上都遇到了这个错误。我只是不明白为什么它可以在我的本地主机上运行，但不能在我的服务器上运行。有任何解决方法吗？
最佳答案
chrome 控制台中的错误项是“正常”的，与您的问题无关。我也看到了，但共享仍然有效。
我已经使用 FF 和 Chrome 测试了您的网站，无论我是否登录，发送按钮都正常工作。发送和取消按钮也可以在弹出按钮上使用。
我对被点赞的 url 进行了 lint，并且它被正确地 lint(通常这是大多数人问题的根源)。
我想知道它是否与您的特定浏览器有关。也许您的盒子上有一个主机文件条目将资源指向不同的位置。
关于css - Facebook 发送按钮 - 取消按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8926480/