Javascript IE中的jQuery UI对话框和Flash

我一直试图在一起打得很好，但事实证明这相当困难

Zero Clipboard允许通过在按钮上放置一个透明的Flash电影从Javascript复制到剪贴板，这样用户在尝试单击按钮时可以单击Flash。正如您在中所看到的，这在跨浏览器的情况下运行良好

然而，当试图在jQueryUI对话框中使用它时，似乎出现了一些问题

首先，我发现flash元素必须放在dialog元素中，否则Chrome和IE会拒绝响应click事件。这意味着我不能使用

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

对话框（{autoOpen:false，宽度：550，高度：200}）； $（“#showme”）.bind（“dialogopen”，function（）{ if（$（“#clipflash”）.length==0）{ var btn=$（“#d#u clip_按钮”）； $("") .css（btn.position（）） .width（btn.width（）） .height（btn.height（）） .html（clip.getHTML（btn.width（），btn.height（）） .附于（“#showme”）； } }); 为了安全起见，我将div涂成了红色，以便更容易发现并将其z索引设置为9999。然后，我将位置和大小设置为覆盖“按钮”，并使用

clip.getHTML（）

为Flash元素添加HTML

我已经为此工作了好几个小时了，如果有任何帮助，我将不胜感激

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

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

我忘记了自己的金科玉律：在 闪存外部接口的顺序 要在IE 7中工作，您必须填充 将/OBJECT HTML嵌入到DIV元素中 在它被附加到DOM之后。笨蛋

---

但是，切换行

.html（clip.getHTML（btn.width（），btn.height（））

和

.appendTo（“#showme”）

没有帮助。即使在以后添加flashhtml时执行

setTimeout

，也无济于事。我觉得我真的很接近了，虽然…

好的，所以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());
    }
});

$（“#showme”）.bind（“dialogopen”，function（）{
if（$（“#clipflash”）.length==0）{
var btn=$（“#d#u clip_按钮”）；
$("")
.css（btn.position（））
.width（btn.width（））
.height（btn.height（））
.appendTo（“#showme”）
[0].innerHTML=clip.getHTML（btn.width（），btn.height（））；
}
});

---

另外，我忘了在示例页面中添加DOCTYPE，因此IE.My bad中的偏移量是错误的。

我将您的答案改编为可重用的方法，并修复了几个位置问题（我必须添加位置：绝对，并使用

outerWidth（）

和

outerWight（）

）

功能设置复印机（选择器、按钮选择器、回调、选择对话框选择器）{
var copiedText=$（选择器）.text（）；
ZeroClipboard.setMoviePath（'http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf');
var clip=新的ZeroClipboard.Client（）；
clip.setText（复制文本）；
clip.addEventListener（'complete'，callback）；
$（buttonSelector）.each（函数（）{
夹子。胶水（这个）；
});
//确保零剪贴板位于顶部
$（“#ZeroClipboardMovie_1”）。
父项（）。
css（“z指数”，2000年）；
如果（选择对话框选择器）{
$（opt_dialogSelector）.bind（“dialogopen”，function（）{
if（$（“#clipflash”）.length==0）{
var btn=$（opt_dialogSelector）.find（buttonSelector）；
$("")
.css（btn.position（））
.width（btn.outerWidth（））
.高度（btn.outerHeight（））
.appendTo（opt_对话框选择器）
[0].innerHTML=clip.getHTML（btn.outerWidth（），btn.outerHeight（））；
}
});
}
}
$（函数（）{
setupCopier（“#复制div”，“.copy按钮”，函数（）{
警报（“复制”）；
}“对话”；
$（“#打开对话框按钮”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
$（“#dialog”）.dialog（{autoOpen:false，modal:true，resizeable:false，draggable:false，
标题：“立即创建您的免费个人酒吧”，高度：200，宽度：300}）；
});

你为什么不把它写在回答中，这样我至少可以投你一票？

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