1

我有一个类似 facebook 的按钮（iFrame 版），它覆盖在完整的浏览器 Flash 应用程序之上。点赞按钮与应用程序中的单独图像挂钩，当显示每个新图像时，点赞按钮会使用 ExternalInterface 刷新数据。

使用 JQuery fadeIn() / fadeOut() 为每个新图像淡入和淡出like 按钮，再次使用 ExternalInterface 调用。

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

CSS：

        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 是包含 iFrame 的 div，它的 z-index 是 9999 只是为了确保它始终位于顶部。

这是正在使用的JS：

<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 获取从 Flash 发送的照片的 id，以重新创建 iFrame 的 src 属性。

当然，因为这是一个 Flash 应用程序，所以这里是最小的 HTML：

<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 中的错误。

任何帮助是极大的赞赏。

提前致谢。

语法

4

1 回答 1

2

经过几个星期的来回，我终于想通了。事实证明，问题在于 iframe 被放置在 Flash 内容之上。

这通过在 swfobject 调用中添加一个参数来解决——将 wmode 设置为透明：

        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 按钮的问题，而是 iframe 和 Flash 的问题。当然，如果您不使用 SWFObject 来显示您的 swf 文件，wmode 是一个参数，可以在您发布 swf 时在 Flash 的发布属性中设置。

干杯

于 2010-10-18T14:15:43.703 回答