Javascript 仅适用于带警报的 Safari

Question

我是 javascript 的新手，在让我的脚本在 Safari 中运行时遇到问题。我已经进行了大量的谷歌搜索来寻找解决方案，但没有找到任何有效的方法。

我有一个 HTML 页面，它使用 javascript 从两个单独的数组加载 swf 和标题。有一个“下一个”按钮，单击后将加载另一个 SWF 和新的标题。它在 IE 和 Firefox 中完美运行，但在 Safari 中，新的 SWF 无法显示。在 Safari 调试器中，它显示正确的新 SWF 文件名，但在屏幕上显示原始 SWF。我让它工作的唯一方法是在代码后面有一个警报。我尝试调整函数中的事件顺序，但这并没有解决任何问题。

有什么想法吗？ （如果我提供了太多代码，我很抱歉，我只想向您提供完整的图片。）

Javascript（位于标题中）：

var swfFrame=new Array();
swfFrame[0]='frame_01.swf';
swfFrame[1]='frame_02.swf';
swfFrame[2]='frame_03.swf';

var paragraphTxt=new Array();
paragraphTxt[0]='caption 1';
paragraphTxt[1]='caption 2';
paragraphTxt[2]='caption 3';

function nextFrame(x){
i = i+x;
if(i>=swfFrame.length){
    i=i-1;
    window.open('quiz.html');
}else{
document.getElementById("framenum").innerHTML = (i+1) + " of " + swfFrame.length;
document.getElementById("paragraph").innerHTML = paragraphTxt[i];
// IE
document.getElementById("flashPlayer").movie = "swf/" + swfFrame[i];
// FIREFOX et al
<!--[if !IE]>-->
document.getElementById("flashPlayer").data = "swf/" + swfFrame[i];
<!--[endif}-->
//  ALERT (doesn't work in Safari if alert is off)
alert(document.getElementById("flashPlayer").data);
}
if(i>0){
    document.getElementById("button_Bck").style.visibility = "visible";
}else{
    hideBack();
}
}

function hideBack(){
document.getElementById("button_Bck").style.visibility = "hidden";
}

用于前进到下一个 swf 的按钮代码：

<a href="javascript://" onclick="nextFrame(1)"><div id="button_Nxt"><div id="buttonText">Next</div></div></a>

Answer 1

@rlane423：我认为您实际上不能在脚本块中使用像这样的条件注释。

尝试 -

    /* preceding code omitted for brevity */

    var isIE = false; // set to false by default
</script>

<!--[if IE]>
<script type="text/javascript">
    isIE = true;
</script>
<![endif]-->

<script type="text/javascript">
     if (isIE) {
         // IE
         document.getElementById("flashPlayer").movie = "swf/" + swfFrame[i];
     } else {
         // FIREFOX et al
         document.getElementById("flashPlayer").data = "swf/" + swfFrame[i];
     }

     /* rest of script omitted for brevity */
</script>

Answer 2

我认为你的问题是由于 flash 在与 javascript 不同的线程中运行。当您使用警报进行调试并且您的页面包含 Flash 时，您可能会遇到这些类型的 heisenbug。如果没有 Flash，页面上的所有内容（包括 JavaScript）都会在警报期间被阻止。另一方面，Flash 在单独的线程上运行，并且不会因警报而阻塞。

这个例子说明了我正在谈论的内容：

<object width="480" height="390"><param name="movie" value="http://www.youtube.com/v/oHg5SJYRHA0?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/oHg5SJYRHA0?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="390"></embed></object>
<a href="javascript:alert('hello'); return false;">Click me!</a>

开始播放电影，然后单击链接 - 当警报响起时，视频不会停止播放。

最简单的解决办法可能是将警报语句后面的代码包装在 setTimeout 函数中，并有短暂的延迟：

setTimeout(function() { ... }, 50);

更好的解决办法是向 Flash 影片注册一个事件或轮询它，直到它准备好更新为止。

Answer 3

你的 i 数组索引实际上达到了第三个索引吗？

如果您每次调用函数 nextFrame(1)...每次调用该函数时您是否只将数字 1 传递到该函数中，或者您是否使用

nextFrame(1) 进行了 3 个不同的函数调用
下一帧(2)
nextFrame(3)

另外，您还没有像 var i = 0; 那样声明 i我会这样做......出于这些目的，如果您将 i 声明为 nextFrame 函数之外的全局变量，然后每次调用 nextframe() 函数时将其增加 1，那么您的代码会轻很多。然后根据全局i加载你想要的电影。

var i = 0;
function nextFrame(){
    loadSwf[i];
    i++;
}

然后调用该函数

onclick="nextFrame()"

Answer 4

我想出了一个可行的解决方案。这可能是一个完整的黑客，但它可以在我需要的所有浏览器中运行。

首先，按照 @stealthyninja 的建议，我改变了检测 IE 的方式。然后我决定尝试完全重新加载 Flash，而不是仅仅交换 swf 的文件名。第一个 Flash 正在使用 swfobject.js 动态发布方法加载。所以我以同样的方式重新加载后续帧。我想为此使用innerHTML，但它不喜欢我尝试将javascript放入其中。因此，我在 Flash 内容的 div 中添加了一个空的 javascript 块，并使用 innerHTML 加载其中的 swfobject 调用。 （希望这是有道理的，并且不是完全倒退的做法。）代码如下。

<script type="text/javascript">
var isIE =false;
</script>

<!--[if IE]>
<script type="text/javascript">
    isIE = true;
</script>
<![endif]-->

<script type="text/javascript">
    var flashvars = {};
    var params = {};
    params.play = "true";
    params.loop = "false";
    params.menu = "false";
    params.quality = "best";
    params.wmode = "window";
    params.bgcolor = "#FFFFFF";
    params.allowscriptaccess = "sameDomain";
    var attributes = {};
    attributes.align = "middle";
    swfobject.embedSWF("swf/frame_01.swf", "flashPlayer", "100%", "100%", "9.0.0", false, flashvars, params, attributes);

var i=0;
var swfFrame=new Array();
    swfFrame[0]='frame_01.swf';
    swfFrame[1]='frame_02.swf';
    swfFrame[2]='frame_03.swf';

var paragraphTxt=new Array();
    paragraphTxt[0]='caption 1';
    paragraphTxt[1]='caption 2';
    paragraphTxt[2]='caption 3';

function nextFrame(x){
i = i+x;
//alert("i+x = " + (i));
if(i>=swfFrame.length){
    i=i-1;
    window.open('quiz.html');
}else{
    document.getElementById("framenum").innerHTML = (i+1) + " of " + swfFrame.length;
    document.getElementById("paragraph").innerHTML = paragraphTxt[i];
    if(isIE){
        // IE
        document.getElementById("flashPlayer").movie = "swf/" + swfFrame[i];
    }else{
        document.getElementById("newScript").innerHTML = swfobject.embedSWF("swf/" + swfFrame[i],"flashPlayer","100%","100%","9.0.0",false,flashvars,params,attributes);
    }
}
if(i>0){
    document.getElementById("button_Bck").style.visibility = "visible";
}else{
    hideBack();
}
}

带有新添加的 javascript 块的 Flash 内容的 Div 位置：

<div id="flash">
    <script type="text/javascript" id="newScript">
    </script>
        <div id="flashPlayer">
        <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>
</div>