当前位置： 文江博客话题详情

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

发布于 2024-12-27 20:32:15 字数 3938 浏览 6 评论 0原文

我刚刚在我的页面上添加了 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.

我在我的开发计算机和我的实时计算机上都收到此错误网站。我只是不明白为什么它可以在我的本地主机上运行，​​但不能在我的服务器上运行。有什么解决方法吗？

原文

I just added a Facebook Like/Send plugin onto my page. I QA'd the plugin on my dev machine and everything worked perfect. When I published the site to my live website (http://www.raveradar.com) the "Send" button began having problems.

The problem is only effecting the Send button, when you click "Send" a new form opens up, but oddly enough the Cancel button on this form does not function anymore. That is, when the Cancel button is clicked the flyout form does not disappear. No errors, nothing. All I can figure is that this is some sort of CSS problem, but what confuses me is that this was working on localhost in all browsers. If it was a CSS problem shouldn't I have experienced it?

Any help is greatly appreciated.

HTML tag:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

Body:

<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;

}

EDIT:
After inspecting the Chrome console, I can see that an error IS being thrown when I click the "Cancel" button:

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.

I'm getting this error on both my dev machine, and my live website. I just don't understand why it works on my localhost, but not on my server. Are there any workarounds?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

小苏打饼 2025-01-03 20:32:15

chrome控制台中的错误项是“正常”，与您的问题无关。我也看到了，不过分享还是有效的

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

我对喜欢的网址进行了 lint 检测，并且它的 lint 正确（通常这是大多数人问题的根源）。

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

The error item in the chrome console is "normal" and is not related to your issue. I see it too, but the share still works.

I've tested your site with both FF and Chrome, and the send button is working normally whether or not I'm logged in. Both send and cancel button work on the fly-out too.

I linted the url being liked, and it is being linted correctly (usually this is the source of most people's issues).

I'm wondering if it is related to your particular browser. Maybe there's a host file entry on your box that is pointing resources at a different location.

回复 原文
蓝咒 2025-01-03 20:32:15

我最近遇到了与 Andrew Craswell 相同的问题，但不幸的是，对我来说，在不同的机器上测试它并没有产生不同的结果；取消按钮仍然不起作用，并且无法关闭共享模式。

经过一番搜寻后，通过最小化测试用例，我发现我的问题与 CSS 相关，我们在全局 CSS 文件中执行此操作：

.fb_iframe_widget { display: block !important; }

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

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

I recently ran into an identical issue as Andrew Craswell, but unfortunately for me, testing it on a different machine did not yield different results; the Cancel button was still non-functional and the Share modal could not be dismissed.

After some hunting around & working down to minimal test cases, I found out that my issue was CSS related, we were doing this in our global CSS file:

.fb_iframe_widget { display: block !important; }

Removing this line fixed the issue entirely. It's worth noting that this happened in both Webkit & non-Webkit browsers.

Hopefully this helps anyone else who may run into this problem.

回复 原文
~没有更多了~

关于作者

余生一个溪

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

达拉崩吧

文章 0 评论 0

PANGOO

文章 0 评论 0

kkgtx

文章 0 评论 0

WordPress小学生

文章 0 评论 0

酷炫老祖宗

文章 0 评论 0

硪扪都還晓

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文