动画 HTML5 横幅可在除 Safari 之外的所有设备中使用答案

【问题标题】：Animate HTML5 banner working in everything but Safari动画 HTML5 横幅可在除 Safari 之外的所有设备中使用
【发布时间】：2016-08-07 05:17:44
【问题描述】：

我在 Animate CC 中创建了一个横幅，您可以在此处看到： http://www.dctuk.it/test/trustpilotbanner.html

它在所有浏览器中都能正常工作。

但是当我把它放到我们的 beta 站点（一个 asp.NET 站点）上时，它可以在除 Mac 上的 Safari 之外的任何地方使用。它在 Mac 上的 Firefox 和 Chrome 上运行良好，但在 Safari（或 iPad）上运行良好，我不知道为什么。

您可以在网站底部附近看到它：[链接已删除]

有人知道为什么会这样吗？我认为这可能与 Animate 无关，只是一个 javascript 冲突但不确定？

干杯

乔恩

【问题讨论】：

标签： javascript safari jquery-animate adobe

【解决方案1】：

在站点中，您的 init() 函数在靠近底部的某处被覆盖：

<script type="text/javascript">
    if ( $(window).width() < 480) {     
        $( init );
        function init() {

            // Move the paragraph from #myDiv1 to #myDiv2
            $('#coloursnew').append( $('#imageholder') );
        }
    }
    else {
        //Add your javascript for small screens here
    }
</script>

在 webkit 中，即使它在 if 语句中，也会评估此函数并替换您的横幅 init 函数：

function init() {
    // --- write your JS code here ---

    canvas = document.getElementById("canvas");
    images = images||{};

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

解决该问题的一种方法是替换较小设备的代码，如下所示：

if ( $(window).width() < 480) {     
    init = function() {
        // Move the paragraph from #myDiv1 to #myDiv2
        $('#coloursnew').append( $('#imageholder') );
    };
}

这是问题的示例JSFiddle。尝试在不同的浏览器中查看结果。

【讨论】：

我很高兴 :)