Question

我刚在我的页面上添加了一个Facebook赞/发送插件。我在我的开发机器上问了插件，一切都很完美。当我将网站发布到我的实时网站（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>

Page 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.

我在我的开发机器和我的实时网站上都收到了此错误。我只是不明白为什么它在我的localhost上工作，但不在我的服务器上。有没有解决方法？

Answer 1

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

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

我发现网页被人喜欢，并且正确地被打印（通常这是大多数人的问题的来源）。

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

Answer 2

我最近遇到了与Andrew Craswell相同的问题，但不幸的是，在不同的机器上测试它并没有产生不同的结果;取消按钮仍然无法正常工作，共享模式无法解除。

经过一番狩猎后我发现我的问题与CSS有关，我们在全局CSS文件中执行此操作：

.fb_iframe_widget { display: block !important; }

删除此行完全解决了问题。值得注意的是，这发生在Webkit和非Webkit浏览器。

希望这有助于其他可能遇到此问题的人。

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

2 个答案: