getScript - 在对话框确认时执行

Question

我有使用传统独立方法加载的脚本

<Script src="wthvideo/wthvideo.js"></script>

工作没有问题。但是当我在 JqueryUi.Dialog 框上单击确认后尝试使用 Ajax/getScript() 方法加载它时 - 脚本不会 run/load 并且开发人员工具不会显示脚本被调用。

其他组件，例如 fadeIn() 效果触发得很好 - 只有 getScript() 失败。查看 JqueryUi API 我没有看到我在哪里错误地实施它，有人可以阐明为什么脚本不会 load/fire 吗？

$( "#fsr" ).dialog({
      resizable: false,
      height: 350,
      width: 550,
      modal: true,
      buttons: {
        "Allow Fullscreen": function() {
          launchFullscreen(document.documentElement);
          $( this ).dialog( "close" );
            $('#title span').fadeIn(2000);
            $('#titlesub span').fadeIn(2800);
            setTimeout(function(){$('#globe').addClass("globefc");}, 1500);
            /*$.ajax({
            url: "wthvideo/wthvideo.js",
            async: false,
            dataType: "script",
            success: success
            });*/
            $.getScript("wthvideo/wthvideo.js");
            setTimeout(function(){  $('#wthvideo').remove();}, 39500);

        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

Answer 1

您的脚本 (wthvideo.js) 采用以下形式：

function wthplayer() {
  ...
}

if (window.addEventListener) {
    window.addEventListener("load", wthplayer, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", wthplayer);
} else {
    window.onload = wthplayer;
}

所以，你只做了两件事：

1. 定义函数
2. 告诉浏览器在 "onload" 事件触发时执行函数。

您的问题是您在浏览器 onLoad 事件触发 很久之后动态加载 wthvideo.js 脚本 。如果您将脚本 prior 加载到 onLoad 事件，这就是为什么您在使用 <script> 标签时没有问题的原因。

有很多方法可以解决这个问题。一种快速的方法是 check if the onLoad event has already executed 并立即执行您的函数，如下所示：

function wthplayer() {
  ...
}

if (document.readyState === 'complete') {
  wthplayer();
}
else {
  if (window.addEventListener) {
    window.addEventListener("load", wthplayer, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", wthplayer);
  } else {
    window.onload = wthplayer;
  }
}