IE 中的 jQuery UI 对话框和 Flash

Question

我一直在尝试获取零剪贴板和jQuery UI Dialog 一起玩得很好，事实证明这是相当困难的。

零剪贴板允许通过将透明 Flash 影片放置在按钮上来从 Javascript 复制到剪贴板，以便用户在尝试单击按钮时单击 Flash。正如您在演示页面中看到的那样，它运行良好且跨浏览器。

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

首先，我发现flash元素必须放在dialog元素内部，否则Chrome和IE拒绝响应点击事件。这意味着我无法使用 glue 便捷方法，但没关系。

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

我所做的一个例子是这里。我的代码从第 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 索引设置为 9999。然后，我设置位置和大小以覆盖“按钮”，并使用 clip.getHTML() 添加 Flash 元素的 HTML。

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

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

更新

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

我忘记了自己的黄金法则： Flash 外部接口的顺序 要在 IE 7 中工作，您必须填充 将 HTML 嵌入/对象 HTML 到 DIV 元素中 之后它被附加到 DOM 中。愚蠢的IE。

但是，切换行 .html(clip.getHTML(btn.width(), btn.height())) 和 .appendTo("#showme") 并没有'没有帮助。即使稍后使用 setTimeout 添加 Flash HTML 也没有帮助。我觉得我真的很接近，但......

Answer 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 中的偏移量是错误的。我的不好。

Answer 2

我将您的答案改编为可重用的方法，并修复了一些位置问题（我必须添加position:absolute，并使用outerWidth()和outerHeight()。

演示。

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});
});