IE 中的 jQuery UI 对话框和 Flash答案

【问题标题】：jQuery UI Dialog and Flash in IEIE 中的 jQuery UI 对话框和 Flash
【发布时间】：2009-10-08 12:14:16
【问题描述】：

我一直试图让Zero Clipboard 和jQuery UI Dialog 一起玩得很好，但事实证明这相当困难。

零剪贴板允许通过在按钮上放置一个透明的 Flash 影片从 Javascript 复制到剪贴板，以便用户在尝试单击按钮时单击 Flash。正如您在demo page 中看到的那样，这可以很好地跨浏览器运行。

但是，当尝试在 jQuery UI 对话框中使用它时，似乎出现了问题。

首先，我发现flash元素必须放在对话框元素里面，否则Chrome和IE拒绝响应点击事件。这意味着我不能使用glue 便捷方法，但没关系。

但是，现在 IE 出于某种原因不接受 Flash 元素上的setText 方法。

我所做的一个例子是here。我的代码从第 300 行开始，最相关的行是：

$("#showme").dialog({autoOpen: false, width: 550, height: 200});
$("#showme").bind("dialogopen", function() {
    if($("#clipflash").length == 0) {
        var btn = $("#d_clip_button");
        $("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
            .css(btn.position())
            .width(btn.width())
            .height(btn.height())
            .html(clip.getHTML(btn.width(), btn.height()))
            .appendTo("#showme");
    }
});

为了安全起见，我将 div 着色为红色，以便更容易发现并将其 z-index 设置为 9999。然后我设置位置和大小以覆盖“按钮”，并使用clip.getHTML() 添加 Flash 元素的 HTML。

我已经为此工作了几个小时，因此我们将不胜感激。

差点忘了：我的问题是 IE7 在零剪贴板代码中显示“对象不支持此属性或方法”。

更新

powtac 的评论指出了一些看起来很有希望的事情：

我忘记了自己的黄金法则：在订购 Flash ExternalInterface 要在 IE 7 中工作，你必须填充将 HTML 嵌入/对象 HTML 到 DIV 元素中 AFTER 它被附加到 DOM。愚蠢的IE。

但是，切换行 .html(clip.getHTML(btn.width(), btn.height())) 和 .appendTo("#showme") 并没有帮助。甚至为稍后添加 Flash HTML 做 setTimeout 也无济于事。不过，我觉得我真的很亲近……

【问题讨论】：

code.google.com/p/zeroclipboard/issues/detail?id=7#c4
你为什么不把它放在答案中，这样我至少可以投票给你？

标签： javascript flash jquery-ui clipboard zeroclipboard

【解决方案1】：

好的，所以 powtac 确实为我指明了正确的方向，但缺少一个元素：使用 jQuery html() 函数与简单设置 innerHTML 的效果不同。如果有人能解释原因就好了。

所以，固定代码如下所示：

$("#showme").bind("dialogopen", function() {
    if($("#clipflash").length == 0) {
        var btn = $("#d_clip_button");
        $("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
            .css(btn.position())
            .width(btn.width())
            .height(btn.height())
            .appendTo("#showme")
            [0].innerHTML = clip.getHTML(btn.width(), btn.height());
    }
});

另外，我忘记在示例页面中放 DOCTYPE，所以 IE 中的偏移量是错误的。我的错。

【讨论】：

【解决方案2】：

我将您的答案调整为可重复使用的方法，并修复了一些位置问题（我必须添加位置：绝对，并使用 outerWidth() 和 outerHeight()。

Demo.

function setupCopier(selector, buttonSelector, callback, opt_dialogSelector){
  var copiedText = $(selector).text();
  ZeroClipboard.setMoviePath('http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf');
  var clip = new ZeroClipboard.Client();
  clip.setText(copiedText);
  clip.addEventListener('complete', callback);

  $(buttonSelector).each(function(){
    clip.glue(this);
  });

  // Make sure Zero Clipboard is on top
  $("#ZeroClipboardMovie_1").
    parent().
    css("z-index", 2000);

  if (opt_dialogSelector) {
    $(opt_dialogSelector).bind("dialogopen", function() {
      if($("#clipflash").length === 0) {
        var btn = $(opt_dialogSelector).find(buttonSelector);
        $("<div id='clipflash' style='position:absolute; z-index: 9999' />")
          .css(btn.position())
          .width(btn.outerWidth())
          .height(btn.outerHeight())
          .appendTo(opt_dialogSelector)
          [0].innerHTML = clip.getHTML(btn.outerWidth(), btn.outerHeight());
      }
    });
  }
}

$(function(){
  setupCopier('#copy-div', '.copy-button', function(){
    alert("Copied");
  }, '#dialog');

  $("#open-dialog-button").click(function(){
    $("#dialog").dialog("open");
  });

  $("#dialog").dialog({autoOpen: false, modal: true, resizable: false, draggable: false,
        title: "Create your Free Personal Bar now", height:200, width:300});
});

【讨论】：