2016-01-21 1 views
1

J'utilise metawidgetJs, les onglets ne sont jamais support dans l'IE si elle appelle depuis Iframe. Je partage un exemple de code de base.
Voici le fichier html de base si j'ouvre ce fichier dans l'IE ça marche bien, mais si j'appelle ce fichier d'Iframe dans un autre fichier et ouvre ce nouveau fichier dans les onglets du navigateur IE sont détruire.Onglets Metawidgetjs ne fonctionne pas perspicacité le iframe sur le navigateur 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> 

Et ceci est mon autre fichier. Quand j'ouvre celui-ci en appelant premier fichier dans ce iframe, navigateur IE détruire les onglets

<!DOCTYPE html> 
<html> 
<body> 
    <iframe src="firstFile.html" width="500" height="500"> 
    </iframe> 
</body> 
</html> 

Répondre

1

Je vois 2 problèmes avec votre échantillon:

premier problème

sur tous les navigateurs, la les onglets sont fonctionnels mais difficiles à voir. C'est parce qu'il n'y a pas de style CSS. Vous avez omis la référence de la feuille de style dans votre <head>. J'ai ajouté:

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

Et maintenant onglets apparaissent dans les deux versions IFRAME et non IFRAME, sur les navigateurs autres que IE.

Deuxième problème

Le comportement spécifique à IE semble être couvert par ce bogue: https://bugs.jqueryui.com/ticket/8653

Ceci est destiné à être fixé, mais il semble que quelque chose Metawidget faisait était son déclenchement. J'ai essayé une solution de contournement ici: https://github.com/metawidget/metawidget/commit/13f34e22ad71d82f30fb502bfb0a6246c47595a4.

Bâtissez: https://kennardconsulting.ci.cloudbees.com/job/Metawidget/371

S'il vous plaît tester.

+0

Mon problème est seulement deuxième, l'onglet ne fonctionne pas perspicacité l'Iframe dans le navigateur IE. J'utilise IE-11 –

+0

C'était vraiment une solution géniale et rapide, merci beaucoup je cherchais ça depuis des années, la pile est gr8 à cause de gens comme vous :) – sumi