Вкладки Metawidgetjs не работают, чтобы понять iframe в браузере IE

Я использую metawidgetJs, вкладки никогда не поддерживаются в IE, если он вызывается из Iframe. Я делюсь основным примером кода.
Вот основной HTML-файл, если я открываю этот файл в IE, он работает нормально, но если я вызываю этот файл из Iframe в другой файл и открываю этот новый файл в браузере IE, вкладки уничтожаются.

<!DOCTYPE html>
<html>
<head>
 <script src="http://metawidget.sourceforge.net/js/4.2/metawidget-core.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="http://metawidget.sourceforge.net/js/4.2/metawidget-jqueryui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var person = {
            "myname":"no angular js",                   
                "contact":'contact',
              "dimensions": 'dimensions'   
        };
    </script>
</head>
<body>
    <form>
        <div id="metawidget"></div>
    </form>
    <script type="text/javascript">
        var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ), {
            inspector: new metawidget.inspector.CompositeInspector( [ new metawidget.inspector.PropertyTypeInspector(),
                function( toInspect, type, names ) {    
                    return {
                        properties: {
                                "myname":{                      
                                "title":"Name",
                                "section":"Personal Details",
                                "type":"string",
                                 "required":"true",
                                 "pattern":"^(0|[1-9][0-9]*)$"
                            },
                            "contact":{
                                "title":"Contact",
                                "section":"Contact Information",
                                "type":"string",
                                 "required":"true",
                                 "pattern":"^(0|[1-9][0-9]*)$"
                                        },
                            "dimensions":{
                                "title":"Aggrigation Dimention",
                                "section":"Dim",
                                "type":"string",
                                 "required":"true",
                                 "pattern":"^(0|[1-9][0-9]*)$"
                            }
                        }
                    };
                } ] ),
            layout: new metawidget.jqueryui.layout.TabLayoutDecorator(
                new metawidget.layout.DivLayout( { numberOfColumns: 2 } ))
        } );        
        mw.toInspect = person;
        mw.buildWidgets();
    </script>
</body>

И это мой другой файл. Когда я открываю этот файл, вызывая первый файл в этот iframe, браузер IE уничтожает вкладки

<!DOCTYPE html>
<html>
<body>
    <iframe src="firstFile.html" width="500" height="500">
    </iframe>
</body>
</html>
Источник

1 ответ

Решение

Я вижу 2 проблемы с вашим образцом:

Первая проблема

Во всех браузерах вкладки работают, но их трудно увидеть. Это потому, что нет стилей CSS. Вы оставили ссылку на таблицу стилей в своем <head>, Я добавил:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

И теперь вкладки отображаются в версиях IFRAME и не-IFRAME в браузерах, отличных от IE.

Вторая проблема

Поведение, характерное для IE, похоже, покрыто этой ошибкой: https://bugs.jqueryui.com/ticket/8653

Это должно быть исправлено, но похоже, что Metawidget запускал его. Я попытался обойти это здесь: https://github.com/metawidget/metawidget/commit/13f34e22ad71d82f30fb502bfb0a6246c47595a4.

Построен здесь: https://kennardconsulting.ci.cloudbees.com/job/Metawidget/371

Пожалуйста, проверьте.

Источник
Другие вопросы по тегам