FireFox下window.getComputedStyle() is null问题解决方案

做ci的图形化定制时，发现一个问题。

在firefox浏览器下，加载编辑器会抛出js错误，异常显示如下：
看这个错误，是nui.js里面抛出来的，起初以为是nui不支持最新版的firefox。后来查了下，发现不是这个问题。

说下问题场景：

主页面a.html，内容如下：

<html>
    <body>
         <div style="display: none;">
               <iframe src="b.html"></iframe>
         </div>
    </body>
</html>

调用的子页面b.html，内容如下：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>设置任务参数</title>
  <link rel="stylesheet" href="css/jquery-ui.css"/>
  <script src="js/libs/jquery-1.8.1.min.js"></script>
  <script src="js/libs/jquery-ui-1.10.4.js"></script>
  <script src="js/libs/nui-min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/default/miniui.css">
  <link rel="stylesheet" type="text/css" href="css/default/nui-ext.css">
  <link rel="stylesheet" type="text/css" href="css/icons.css">
</head>
<body>
<input id="jobflow_name" class="nui-combobox" style="width: 150px;" textField="name" valueField="name" emptyText="请选择..." required="true" allowInput="true" showNullItem="true" nullItemText="请选择..." onvaluechanged="onChangeJobflowName()" />
</body>
<script>
nui.parse();
.....
</script>
</html>

可以很清楚的看到，子页面加载了nui的下拉框控件，并对控件做了操作。

那么正确的打开方式是这样子的：加载主页面a.html，页面显示nui下拉框。IE和Chrome、Opera下都是正常的（国产浏览器没有测试过），然后用FireFox一打开就闹别扭了。

分析一下问题原因

先说下加载过程：打开a.html之后，首先显示遮罩层，然后再显示内容层，最后页面全部展示完毕。firefox下面整个过程是正确的，但是却没有办法获取到。

写了个测试的html：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script>

window.onload = function() {
	var innerWindow = document.getElementsByTagName( 'iframe' )[ 0 ].contentWindow,
		innerBody = innerWindow.document.body;

	var style = innerWindow.getComputedStyle( innerBody, null );

	document.body.innerHTML = style ? 'PASS' : 'FAIL';
}

	</script>
</head>
<body>
	<div style="display: none">
		<iframe src="about:blank"></iframe>
	</div>
</body>
</html>

直接打印出fail

空间快捷链接

页面树结构