setTimeout(
function() {
// 生成背景图层
var obackgound = document.createElement(‘div’);
obackgound.id = ‘my_background’;
document.body.appendChild(document.body, obackgound);
// 在 app 这个容器里显示有价值的内容
var app = $(‘container’);
var fix_position = function() {
if (app.style.display == ‘none’) return;
var ch = document.documentElement.clientHeight,
sh = document.documentElement.scrollHeight,
st = document.documentElement.scrollTop;
// 背景图层的 宽高 是浏览器实际内容的 宽和高
obackgound.style.height = (sh > ch ? sh : ch) + ‘px’;
obackgound.style.width = document.body.clientWidth + ‘px’;
// 根据要显示内容的宽高，确定他在浏览器里的位置
var pos = [], pw;
pw = 840;
pos[0] = (document.body.clientWidth – pw) / 2;
pos[1] = parseInt(st);
if (navigator.product && navigator.product == ‘Gecko’) {
pw -= 140;
}
app.style.position = ‘absolute’;
app.style.left = pos[0] + ‘px’;
app.style.top = pos[1] + ‘px’;
app.style.width = pw + ‘px’;
}
// !!! 重要 !!! 这里是问题的关键，Windows 和 Firefox 对 window.onresize 事件的处理方式不同
// 在浏览器装载了新内容，并重新绘图的时候，总体内容的尺寸会发生变化，但是调用上面这个事件的时间点不同
// IE 容易导致死循环
// 所以，加了延迟，避免 IE 崩溃。这里就体现出 Firefox 浏览器在设计上的优秀之处。
setTimeout(
function() {
window.onresize = fix_position;
}, 100 );
obackgound.style.display = ‘block’;
fix_position();
},
50
);
}