YUI对话框/面板在IE iframe中不能正确呈现

问题描述

我建立了一些弹出窗口 - 一些使用YUI对话框，一些使用面板。这些在FF，Windows Safari，Chrome中正确显示。请参考以下截图：

然而在IE 7,9& 10对话有时会以扭曲的方式出现，有时会出现。请参阅以下屏幕截图：

我无法弄清IE中只有 有时 出了什么问题。我正在使用YUI版本2.7.0。

要查看这个动作，你可以访问这个博客页面。将鼠标悬停在其中一个缩略图上，然后点击预览/下载/传输按钮。

我注意到如果我直接从IE浏览这个网址，对话框似乎渲染好！所以我强烈地感觉到这与在IE中的iframe中调用YUI对话框有关。但我无法弄清楚如何克服这个问题。任何想法？

这里是我用于上面预览对话框的代码 - 只是为了提供任何帮助。

  LargePreviewPopup = 
 {
 popup：null，
 init：function（）
 {
 this.popup =新的YAHOO.widget.Panel（LargePreviewPopup，
 {
 width：380px，
 height：410px，
 zIndex：3000，
 fixedcenter： true，
 visible：false，
 draggable：true，
 modal：true，
 constraintoviewport：false，
效果：{效果：YAHOO.widget.ContainerEffect.FADE ，持续时间：0.10} 
}）; 
 if（YAHOO.env.ua.ie> 0）
 this.popup.cfg.setProperty（iframe，true）; 
 PluginFix.showHidePlugins（this.popup）; 
 this.popup.setHeader（NA）; 
 this.popup.setBody（NA）; 
 this.popup.render（document.body）; 
 
 
 $ b onShowLargePreviewClick：function（userId，captionId，height，width）
 {
 if（！this.popup）
 this.init（）; 
 this.popup.setBody（< div class ='ajaxloader'>< / div>）; 
 this.popup.setHeader（Preview）; 
 
 this.popup.hideEvent.subscribe（function（）
 {
 LargePreviewPopup.popup.setBody（< div class ='ajaxloader'>< / div> ）; 
}）; 
 
 this.popup.cfg.setProperty（height，height + 57 +px）; 
 this.popup.cfg.setProperty（width，width + 35 +px）; 
 this.popup.show（）; 
 
 var cObj = Custom.Ajax.asyncRequest（'GET'，
'/embed/embed_operations.aspx?action=large_preview&amp;user_id='+ userId +'& amp; amp; amp; amp; amp; caption_id ='+ captionId 
 +'& amp; amp; h ='+ height +'& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; w ='+ width，
 {
 success：function（o）
 {
 LargePreviewPopup.popup.setBody（o.responseText）; 
} 
}）; 
} 
}; 
  

解决方案

对于任何可能面临此问题的人 - 不要使用YUI来解决这个问题。所以我在IE上使用jquery-ui实现了我的弹出窗口。因此，在所有非IE浏览器中，我使用YUI弹出窗口，而IE浏览器则使用jquery-ui完成。

I have built a few popups - some using YUI dialog, some using panel. These get rendered correctly in FF, Windows Safari, Chrome. Please refer following screenshots:

http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/WorkingDialog-Firefox.PNGhttp://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/WorkingPanel-Firefox.PNG

However in IE 7, 9 & 10 the dialogs appear in a distorted manner sometimes and appear normally sometimes. See the screenshots below:

http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/DistortedDialog-IE9.PNGhttp://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/DistortedPanel-IE9.PNG

I am not able to figure out what goes wrong only sometimes in IE. I am using YUI version 2.7.0.

To see this in action, you can access this blog page. Hover on one of the thumbnails and click on preview/download/transmit buttons.

http://embed-test-blog.blogspot.in/2012/04/sample-for-yui-forum.html

The blog url I provided above embeds the following url using an iframe.

http://embed.mediapartner.com/embed.aspx?e=f2+Wk9GtFDM=

I have noticed that if I directly access this url from IE, the dialogs appear to render alright! So I strongly feel that this is something to do with YUI dialogs being invoked within an iframe in IE. But I am not able to figure out how to overcome the problem. Any ideas?

Here is the code I am using for the preview dialog above - just in case that's of any help.

LargePreviewPopup =
{
popup: null,
    init: function()
    {
        this.popup = new YAHOO.widget.Panel("LargePreviewPopup",
        {
            width: "380px",
            height: "410px",
            zIndex: 3000,
            fixedcenter: true,
            visible: false,
            draggable: true,
            modal: true,
            constraintoviewport: false,
            effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.10 }
        });
        if (YAHOO.env.ua.ie > 0)
            this.popup.cfg.setProperty("iframe", true);
        PluginFix.showHidePlugins(this.popup);
        this.popup.setHeader("NA");
        this.popup.setBody("NA");
        this.popup.render(document.body);
    },


onShowLargePreviewClick: function(userId, captionId, height, width)
    {
        if (!this.popup)
            this.init();
        this.popup.setBody("<div class='ajaxloader'></div>");
        this.popup.setHeader("Preview");

this.popup.hideEvent.subscribe(function()
        {
            LargePreviewPopup.popup.setBody("<div class='ajaxloader'></div>");
        });

this.popup.cfg.setProperty("height", height + 57 + "px");
        this.popup.cfg.setProperty("width", width + 35 + "px");
        this.popup.show();

var cObj = Custom.Ajax.asyncRequest('GET',
        '/embed/embed_operations.aspx?action=large_preview&amp;user_id=' + userId + '&amp;caption_id=' + captionId
            + '&amp;h=' + height + '&amp;w=' + width,
            {
                success: function(o)
                {
                    LargePreviewPopup.popup.setBody(o.responseText);
                }
            });
    }
};

解决方案

For anyone who might be facing this problem - I could not figure this out using YUI. So I implemented my pop-ups using jquery-ui on IE. So on all the non-IE browsers I use YUI pop-ups while for IE this is done using jquery-ui.

这篇关于YUI对话框/面板在IE iframe中不能正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！