首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Windows Firefox中的Facebook Like按钮问题

Windows Firefox中的Facebook Like按钮问题
EN

Stack Overflow用户
提问于 2010-10-07 01:41:55
回答 1查看 2.9K关注 0票数 1

我有一个脸书喜欢按钮( iFrame版),这是覆盖在一个完整的浏览器Flash应用程序的顶部。like按钮连接到应用程序中的like单独的图像,并且当显示每个新图像时,like按钮使用ExternalInterface的数据刷新。

like按钮使用JQuery fadeIn() / fadeOut()淡入和淡出每个新图像,这也是通过ExternalInterface调用的。

我遇到的问题是,在Windows上,这似乎不想工作,特别是在Firefox中...

CSS:

代码语言:javascript
复制
        html {
            height: 100%;
            overflow: hidden;
            min-width: 800px;
            min-height: 600px;
        }
        #flashContent {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 1;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
        #fb-like {
            position: absolute;
            bottom: 32px;
            left: 510px;
            width: 280px;
            z-index: 9999;
            display: none;
        }

fb-like是包含索引的div,它的z- iFrame是9999,以确保它始终在顶部。

下面是正在使用的JS:

代码语言:javascript
复制
<script type="text/javascript">

    var isVisible = false;  

    function showLikeButton( visible ){         

        if( visible == true )
        {
            $('#fb-like').fadeIn( 'slow' );

            isVisible = true;

        }
        else if ( isVisible )
        {
            $('#fb-like').fadeOut( 'slow' );

            isVisible = false;

        }
    }

    var begOfUrl = "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmywebsite.com%2fdirectory";
    var endOfUrl = "&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=dark&amp;height=21";

    function sendIdToLikeButton( title, id ){                   
        $( '#facebook-like' ).attr( 'src', begOfUrl + "%3Fid=" + id + endOfUrl );
    }

</script>

其中sendIdToLikeButton方法使用ExternalInterface获取从闪存发送的照片的id,以重新创建iFrame的src属性。

当然,由于这是一个flash应用程序,下面是最小的HTML:

代码语言:javascript
复制
<body>

<div id="fb-like">
        <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fnfb.designaxiom.com/build13&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=dark&amp;height=21" scrolling="no" frameborder="0" style="position: absolute; border:none; overflow:hidden; width:300px; height:40px;" allowTransparency="true" id="facebook-like"></iframe>
    </div>
    <div id="flashContent">
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
    </div>
</body>

同样,除了Windows中的Firefox之外,它在任何地方都有效,我不知道该怎么做。我假设这是CSS或Javascript中某个地方的错误。

任何帮助都是非常感谢的。

提前谢谢。

语法

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-10-18 22:15:44

经过几周的反复,我终于明白了这一点。事实证明,问题在于iframe被放在flash内容的上方。

通过向swfobject调用添加一个参数--将wmode设置为transparent:

代码语言:javascript
复制
        var params = {};
        params.bgcolor = "#000000";
        params.allowfullscreen = "true";
        params.allowscriptaccess = "true";
        params.wmode = "transparent";

        var attributes = { id: "nfb", name:"nfb" };
        var swfUrl = "Runner.swf";

        swfobject.embedSWF( swfUrl, "flashContent", "100%", "100%", "10.0.0", false, flashvars, params, attributes );

将wmode设置为透明,允许在每个浏览器中将“透明的”iframe放在应用程序的顶部。

所以事实证明,这根本不是facebook的like按钮的问题,而是iframes和Flash的问题。当然,如果你没有使用SWFObject来显示你的swf文件,wmode是一个可以在你发布你的swf文件时在Flash的发布属性中设置的参数。

干杯

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3875364

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档