Кнопка отправки Facebook - кнопка отмены не работает - PullRequest
Новая
       42

Кнопка отправки Facebook - кнопка отмены не работает

0 голосов
/ 19 января 2012

Я только что добавил плагин Facebook Like / Send на мою страницу. Я QA'd плагин на моей машине разработчика, и все работало отлично. Когда я опубликовал сайт на своем живом веб-сайте (http://www.raveradar.com), у кнопки «Отправить» возникли проблемы.

Проблема возникает только при нажатии кнопки «Отправить», когда вы нажимаете «Отправить», открывается новая форма, но, как ни странно, кнопка «Отмена» в этой форме больше не работает. То есть при нажатии кнопки «Отмена» всплывающая форма не исчезает. Нет ошибок, ничего. Все, что я могу понять, это то, что это какая-то проблема CSS, но меня смущает то, что это работает на localhost во всех браузерах. Если бы это была проблема CSS, разве я не испытал это?

Любая помощь очень ценится.

HTML-тег: 

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

Страница 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: После проверки консоли 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.

Я получаю эту ошибку как на своем компьютере разработчика, так и на моем живом веб-сайте. Я просто не понимаю, почему это работает на моем локальном хосте, но не на моем сервере. Есть ли обходные пути?

Ответы [ 2 ]

1 голос
/ 19 января 2012

Элемент ошибки в консоли chrome "нормальный" и не связан с вашей проблемой. Я тоже это вижу, но доля все еще работает.

Я проверил ваш сайт как с FF, так и с Chrome, и кнопка отправки работает нормально, независимо от того, вошел ли я в систему. Кнопки отправки и отмены также работают во всплывающем окне.

Я написал понравившийся вам URL, и он написан правильно (обычно это источник проблем большинства людей).

Мне интересно, связано ли это с вашим конкретным браузером. Возможно, в вашем ящике есть запись файла хоста, указывающая ресурсы в другом месте.

0 голосов
/ 16 мая 2012

Недавно я столкнулся с проблемой, идентичной Andrew Craswell, но, к сожалению для меня, тестирование на другой машине не дало других результатов;кнопка «Отмена» по-прежнему не работала, и модал «Поделиться» не мог быть отклонен.

После некоторого поиска и проработки минимальных тестовых случаев я обнаружил, что моя проблема связана с CSS, мы делали это внаш глобальный файл CSS: 

.fb_iframe_widget { display: block !important; }

Удаление этой строки полностью устранило проблему.Стоит отметить, что это произошло как в браузерах Webkit, так и в других браузерах.

Надеюсь, это поможет всем, кто столкнется с этой проблемой.

...