私は metawidgetJs を使用しています。Iframe から呼び出す場合、タブは IE でサポートされません。基本的なサンプル コードを共有します。
基本的な 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>