0

几个问题：

1）我试图让这个脚本更有效地运行。

2）当用户单击任一弹出按钮时，它会打开一个窗口并隐藏元素。（目前我正在使用 .detach() 删除嵌入式视频播放器，因为在 Firefox 中 .toggle() 只是隐藏播放器但保持音频播放。有没有更好的方法来做到这一点？

3）理论上，通过再次单击按钮或手动关闭窗口，它应该取消隐藏或 .toggle() 元素，但由于 detach() 而不适用于视频播放器。

4）如果用户弹出窗口手动将其关闭，然后再次将其弹出以再次关闭它，则元素不会 .toggle() 返回。

在此处查看实际操作，http://www.mst3k.tv/。

$(document).ready(function() {
  $('#lights').click(function(){$('#darkness').fadeToggle(500);});
  $("#lights").toggle(function(){$("#lights").attr('id','lightsoff');},function(){$("#lightsoff").attr('id','lights');});
  /**VIDEO**/
  var videoWin;
  $('#video-toggle').click(function(){
      $('#video').fadeToggle(500);
      $('#video').detach();
      });
  $('#video-toggle').click(function(){
      if (videoWin && !videoWin.closed) {
        videoWin.close();
        return false;
      }
      videoWin = window.open(
        $(this).attr('rel'),
        'videoWin',
        'width=600,height=480,toolbar=0,top=0,left=0,menubar=0,location=0,status=0,scrollbars=0,resizable=1');
      return false;
      }
    );
  var watchVideo = setInterval(function() {
      if (videoWin.closed) {clearTimeout(watchVideo);$('#video').show(500)}
      return false;
   }, 1);
  /**CHAT**/
  var chatWin;
  $('#chat-toggle').click(function(){
      $('#chat').fadeToggle(500);
      /*$('#chat').detach();*/
      });
  $('#chat-toggle').click(function(){
      if (chatWin && !chatWin.closed) {
        chatWin.close();
        return false;
      }
      chatWin = window.open(
        $(this).attr('rel'),
        'chatWin',
        'width=320,height=480,toolbar=0,top=0,left=601,menubar=0,location=0,status=0,scrollbars=0,resizable=1');
      return false;
      }
    );
  var watchChat = setInterval(function() {
      if (chatWin.closed) {clearTimeout(watchChat);$('#chat').show(500)}
      return false;
   }, 1);
  /*$("a.btn").fitText(1.2, { minFontSize: "6px", maxFontSize: "14px" });*/
});
4

2 回答 2

3

如果您为您的代码创建一个 jQuery 插件会更好，这样您就可以重复使用它并避免 DRY。这里有几个选项：

插件一：jQuery popupWindow

插件2：jQuery winPop

另请注意，该closed属性不是任何 W3C 规范的一部分，但它可能在浏览器中受支持。

于 2013-03-13T02:51:14.397 回答
1

您还可以编写一个可以重用的 JS 函数。根据w3cschools 网站，大多数主要浏览器都支持window.close属性，您可以在触发事件之前检查它。

代替

if(videoWin && !videoWin.closed)

你可以使用

if (typeof videoWin!='undefined'){ /* it has been created */}
elseif(typeof videoWin='undefined') { /*it's okay to open the new window*/}

如果您使用它作为检查，请确保您没有创建变量，直到窗口打开事件被触发。由于您在函数声明上方几行创建了 var，因此它将始终按定义返回。

你需要在你的函数中指定一个目标对象，让它正确地抛出多个窗口......这意味着你不能为多个窗口声明一个 var。也许上课会更好。

我之前认为很奇怪，但在 FB 过早发布我的回复之前忘记提及的是，您在rel属性中添加了href并将 href 指定为 js:void(0) ，这也是非标准的。rel 属性用于指定链接和页面之间的关系...（例如 rel=nofollow）。这也可能是为什么它有时也不会触发和误触发，以及浏览器响应之间的差异。

于 2013-03-13T08:02:03.913 回答