Facebook发送按钮 - 取消按钮不起作用

问题描述：

我刚刚在我的页面上添加了一个Facebook Like/Send插件。我在我的开发机上QA插件，一切都很完美。当我将网站发布到我的实时网站（http://www.raveradar.com）时，“发送”按钮开始出现问题。Facebook发送按钮 - 取消按钮不起作用

问题只是影响发送按钮，当你点击“发送”一个新的窗体打开，但奇怪的是，这个窗体上的取消按钮不再工作。也就是说，当点击取消按钮时，弹出窗体不会消失。没有错误，没有。我所能想到的是，这是一些CSS问题，但让我困惑的是，这是在所有浏览器中的本地主机上工作的。如果这是一个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.

我在我的开发机器和我的实时网站上遇到这个错误。我只是不明白为什么它在我的本地主机上，但不在我的服务器上。有没有解决方法？

什么是HTML被发送到浏览器？ – DMCS

我不遵循，你能更具体吗？ –

请同时发布网络浏览器看到的视图源。我在上面的问题中看到的是服务器端代码。 – DMCS

答

铬控制台中的错误项是“正常”，并且与您的问题无关。我也看到了，但分享仍然有效。

我已经测试了您的网站同时使用了FF和Chrome，并且无论我是否登录，发送按钮都正常工作。发送和取消按钮都可以在飞出时工作。

我弄了一个被人喜欢的网址，并且它正在被正确地拼接（通常这是大多数人的问题的来源）。

我想知道它是否与您的特定浏览器有关。也许你的盒子上有一个主机文件条目，指向不同位置的资源。

好的，我明天会从另一个地方查看它，看看发生了什么。在我的开发机器上，我用Chrome，IE，Opera，FF和Safari测试了相同的结果。我希望它像一个主机条目一样简单。感谢您的帮助:) –

不知道我的开发机器出现了什么问题，但它似乎在其他计算机上正确显示。谢谢。 –

答

我最近遇到了和Andrew Craswell一样的问题，但不幸的是，在另一台机器上测试它并没有产生不同的结果;取消按钮仍然无法使用，共享模式不能被解除。

一些狩猎周围&工作降至最小测试用例后，我发现我的问题是CSS相关的，我们在全球的CSS文件中这样做：

.fb_iframe_widget { display: block !important; }

删除此行解决了该问题完全。值得注意的是，这在两个Webkit浏览器中均发生了Webkit &。

希望这可以帮助任何可能遇到此问题的人。

Facebook发送按钮 - 取消按钮不起作用

相关推荐