在 IE8 中，yepnope 在第一次尝试时未在 iframe 中加载资源

Question

我正在使用 jQuery 模态对话，在对话中我们嵌入了 iframe。 iframe 包含“显示搜索结果”按钮

第一次尝试单击“显示搜索结果”按钮时，没有任何反应。 我的结果没有在表格中呈现（可能服务器请求没有触发）。

只有当我切换到浏览器的其他选项卡时才会出现，第二次以后表格渲染正常。

var __run = function(getData) {
    yepnope({
      test : $.fn.flexigrid,
      nope : [ 'www/css/flexigrid.css', '/www/javascripts/flexigrid.js'],
      complete : getData
    });

当 __run 函数在 IE8 中第一次调用时，getData（传递的函数）应该执行但不能执行。

这个问题特定于 IE8

如何处理以上问题？有什么快速的建议吗？

在 Firefox 和 Chrome 等其他浏览器中一切正常。

如果我将 modal 标志更改为 false 然后第一次尝试“显示搜索结果”按钮单击事件，我会在 IE8 中得到结果，但我们需要模态对话所以这不是好的解决方案。

myWindow.dialog({
                modal : false,

更新：添加了 Jquery UI 对话代码

    NewModalUI.popWindow = function($){
    var mWindow = null, mFrame;
    var build = function(){
        mWindow = $('<div id="UI_modal" style="display:none"><iframe id="UI_modalFrame" name="UI_modalFrame" width="100%" height="97%" SCROLLING="auto" frameborder="0"></iframe></div>').appendTo($('body'));
        mFrame = mWindow.find('iframe')
    };
    var isReady = function(){
        return mWindow;
    };
    var isVisible = function(){
        return (!mWindow.is(':hidden'))
    };
    var close = function(){
        __log("Window closed ...");
        mFrame.attr('src', '');
        mWindow.dialog('close')
    };
    var open = function(url){
        if(!isReady()){
            build()
            mFrame.bind('load.modalWindow',function(){
                var $div = mFrame.contents().find('.submitContainerDiv');
                if($div.find('.submitBtns').find('input').length == 1){
                    $div.hide()
                }
            })
            mFrame.attr('src', url)
            mWindow.dialog({
                modal : true,
                height: $(window).height()-100,
                minHeight: '250',
                maxHeight: '90%',
                width:'80%',
                minWidth : '50%',
                maxWidth:'90%',
                buttons : { 
                    'Cancel':function(){
                        $(this).dialog('close')
                    }
                },
                beforeClose : function(){
                    mFrame.attr('src', '')
                }
            })
        }

        if(!isVisible()){
            mFrame.attr('src', url)
            mWindow.dialog('open')
        }else{
            mFrame.attr('src', url)
        }
    };
    return {
        window: mWindow,
        build : build,
        isReady : isReady,
        isVisible : isVisible,
        close : close,
        open : open
    }
}(jQuery);

还观察到IE8生成的html代码

IE8 或 yepnope 将带有 null 值的 onload 事件属性添加到脚本标记 前任。

<script src="/www/javascripts/flexigrid_faster.js" onload="null"></script>

yepnope 加载的资源的第二次 onload 事件属性值发生变化，搜索结果填充在网格中。 前任。

 <script src="/www/javascripts/flexigrid_faster.js" type="script" height="0" width="0"

 onload="function(){k.call(this,r)}"></script>

希望最好的解决方案。

Answer 1

我在http://jsfiddle.net/uUpfg/ 做了一个不言自明的例子我使用了 jQuery 1.9.1 和 jQuery UI 1.9.2

HTML

<a href="#dlg" id="show-dlg">Show dialog</a>
<div id="dlg" class="hide">I am the dialog ;)</div>

JavaScript

;(function ( $, window, document, undefined ) {

    $('#show-dlg').on('click', function() {

        var id = $(this).attr('href');

        $(id).dialog({
            bgiframe: true,
            resizable: false,
            draggable: false,
            modal: true
        });

        return false;
    });


})( jQuery, window, document );

CSS

.hide {
    display: none;
}