IE中的jQuery UI对话框和Flash

Question

我一直在尝试让Zero Clipboard和jQuery UI Dialog一起玩得很好,而且它被证明是相当困难的.

零剪贴板允许通过在按钮上放置透明Flash影片从Javascript复制到剪贴板,以便用户在尝试单击按钮时单击Flash.如您在演示页面中所看到的,这非常适用并且跨浏览器.

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

首先,我发现flash元素必须放在dialog元素中,否则Chrome和IE拒绝响应click事件.这意味着我不能使用glue便捷方法,但没关系.

但是,现在IE由于某种原因不会接受setTextFlash元素上的方法.

我所做的一个例子就在这里.我的代码从第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,这是为了安全起见.然后我设置位置和大小以覆盖"按钮",并添加Flash元素的HTML clip.getHTML().

我现在已经工作了好几个小时,所以任何帮助都会非常感激.

几乎忘了:我的问题是IE7在零剪贴板代码中说"对象不支持这个属性或方法".

UPDATE

powtac的评论指向看起来很有前途的东西:

我忘记了自己的黄金法则:为了让Flash ExternalInterface在IE 7中工作,你必须在将EMBED/OBJECT HTML 附加到DOM 之后将其填充到DIV元素中 .愚蠢的IE.

但是,切换线.html(clip.getHTML(btn.width(), btn.height()))并.appendTo("#showme")没有帮助.即使在setTimeout以后添加Flash HTML也无济于事.我觉得我真的很亲近,不过......

Answer 1

好的，所以 powtac 确实为我指明了正确的方向，但缺少一个元素：使用 jQueryhtml()函数与简单设置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 中的偏移量是错误的。我的错。