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

Posted 2023-05-08

【中文标题】动画 HTML5 横幅可在除 Safari 之外的所有设备中使用

【英文标题】：Animate HTML5 banner working in everything but 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 冲突但不确定？

干杯

乔恩

【参考方案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。尝试在不同的浏览器中查看结果。

【讨论】：

我很高兴 :)