Question

在我的网站中，我使用Flash显示广告

我仍然使用flash，因为访问者的浏览器不支持html5

如果用户没有Flash支持，我会显示画布广告

如果用户没有闪存支持或没有画布支持，我会向他们显示图像

这是我的代码：

<p>
<object width="728" height="90" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="alter-content" align="middle">
    <param value="http://www.bellezaculichi.com/banners/47.swf" name="movie">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="wmode" value="window">
    <param name="scale" value="showall">
    <param name="menu" value="false">
    <param name="devicefont" value="false">
    <param name="salign" value="">
    <param name="allowScriptAccess" value="always">
    <!--[if !IE]>-->
    <object data="http://www.bellezaculichi.com/banners/47.swf" width="728" height="90" type="application/x-shockwave-flash">
        <param name="movie" value="http://www.bellezaculichi.com/banners/47.swf">
        <param name="quality" value="high">
        <param name="bgcolor" value="#ffffff">
        <param name="play" value="true">
        <param name="loop" value="true">
        <param name="wmode" value="window">
        <param name="scale" value="showall">
        <param name="menu" value="false">
        <param name="devicefont" value="false">
        <param name="salign" value="">
        <param name="allowScriptAccess" value="always">
        <!--<![endif]-->

        <!-- inicia sin flash -->
        <script>
            window.onload = function() {
                canvasApp();
            }

            function canvasApp() {

                var mi_canvas = document.getElementById("canvas");

                if (!mi_canvas || !mi_canvas.getContext) {
                    return;
                }


                var context = mi_canvas.getContext("2d");

                var pic = new Image();

                pic.src = "./banners/" + 47 + ".jpg";

                pic.addEventListener('load', imagen_cargada, false);

                function imagen_cargada() {
                    dibuja_canvas();
                }


                function dibuja_canvas() {
                    context.drawImage(pic, 0, 0, 728, 90);
                }

                function onMouseClick(e)

                {

                    window.open("http://www.si-net.com.mx/registro.php", '_blank');
                }

                mi_canvas.addEventListener("click", onMouseClick, false);

                dibuja_canvas();

            }
        </script>

        <canvas id="canvas" width="728" height="90" style="cursor:pointer;">
            <!-- si no soporta canvas -->
            <a href="http://www.si-net.com.mx/registro.php" target="_blank" rel="nofollow">
                <img src="./banners/47.jpg" width="728" height="90" border="0">
            </a>
            <!-- si no soporta canvas -->
        </canvas>

        <!-- fin sin flash -->

        <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>
</p>

它有效......

我使用谷歌Chrome开发者工具进行测试，我发现有flash的人加载了画布后备中使用的图像

如果用户有flash ...

，则无需加载画布中使用的图像

如果用户有闪存，如何避免加载画布中使用的图像？

提前谢谢

Answer 1

我实现了我想要的。如果用户安装了闪存，我就避免加载画布资源。

这是我的代码：

<object width="900" height="506" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="alter-content" align="middle">
<param value="catarina.swf" name="movie" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object data="catarina.swf" width="900" height="506" type="application/x-shockwave-flash">
    <param name="movie" value="catarina.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="play" value="true" />
    <param name="loop" value="true" />
    <param name="wmode" value="window" />
    <param name="scale" value="showall" />
    <param name="menu" value="false" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    <!--<![endif]-->
    <!-- inicia sin flash -->
    <div id="swiffycontainer" style="width: 550px; height: 400px">
    </div>
    <script>
        var hasFlash = false;
        try {
            var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
            if (fo) {
                hasFlash = true;
            }
        } catch (e) {
            if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] != undefined && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
                hasFlash = true;
            }
        }
        if (hasFlash == false) {


            function load_animacion() {

                var animacion = document.createElement("script");

                animacion.type = "text/javascript";

                animacion.src = "catarina-v02.js";

                document.head.appendChild(animacion);
            }

            function loadSwiffy() {


                var animacion_canvas = document.createElement("script");

                animacion_canvas.type = "text/javascript";

                animacion_canvas.src = "https://www.gstatic.com/swiffy/v7.2.0/runtime.js";

                if (animacion_canvas.readyState) {
                    animacion_canvas.onreadystatechange = function() {
                        if (animacion_canvas.readyState == "loaded" || animacion_canvas.readyState == "complete") {
                            animacion_canvas.onreadystatechange = null;

                            load_animacion();
                        }
                    };
                } else {
                    animacion_canvas.onload = function() {
                        load_animacion();
                    };
                }



                document.head.appendChild(animacion_canvas);

            }



            window.onload = loadSwiffy;
            // carga la libreria de swiffy


        }
    </script>

    <!-- fin sin flash -->

    <!--[if !IE]>-->
</object>
<!--<![endif]-->

如果用户没有flash支持，它会动态加载必要的javascript代码以创建CANVAS动画。

在此示例中，firts加载SWIFFY库（https://www.gstatic.com/swiffy/v7.2.0/runtime.js）

加载库时，加载js代码（catarina-v02.js）来创建画布并为其设置动画

这样，如果用户安装了闪存，我就避免加载画布资源。

画布后退到闪存正在加载图片

1 个答案: