Metawidgetjs 选项卡无法洞察 IE 浏览器上的 iframe
Metawidgetjs tabs is not working insight the iframe on IE browser
我正在使用 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>
我发现您的样本有 2 个问题:
第一个问题
在所有浏览器上,选项卡都可以使用,但很难看到。这是因为没有 CSS 样式。您在 <head>
中遗漏了样式表参考。我补充说:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
现在选项卡出现在 IFRAME 和 non-IFRAME 版本中,在 IE 以外的浏览器上。
第二题
IE-specific 行为似乎已被此错误覆盖:https://bugs.jqueryui.com/ticket/8653
这本来是要修复的,但似乎是 Metawidget 正在做的事情触发了它。我在这里尝试了一种解决方法:https://github.com/metawidget/metawidget/commit/13f34e22ad71d82f30fb502bfb0a6246c47595a4.
在这里建造:https://kennardconsulting.ci.cloudbees.com/job/Metawidget/371
请测试。
我正在使用 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>
我发现您的样本有 2 个问题:
第一个问题
在所有浏览器上,选项卡都可以使用,但很难看到。这是因为没有 CSS 样式。您在 <head>
中遗漏了样式表参考。我补充说:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
现在选项卡出现在 IFRAME 和 non-IFRAME 版本中,在 IE 以外的浏览器上。
第二题
IE-specific 行为似乎已被此错误覆盖:https://bugs.jqueryui.com/ticket/8653
这本来是要修复的,但似乎是 Metawidget 正在做的事情触发了它。我在这里尝试了一种解决方法:https://github.com/metawidget/metawidget/commit/13f34e22ad71d82f30fb502bfb0a6246c47595a4.
在这里建造:https://kennardconsulting.ci.cloudbees.com/job/Metawidget/371
请测试。