在载人页面后,浏览器输出流自动关闭;在此之后,任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流。它将清除当前 页面内容(包括源文档的任何变量或值)、因此.假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量、使用一个 document.write()方法完成写操作,不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作。
关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完 内容后.必须关闭输出流。在延时脚本的最后一个document.write()方法后面.必须确保含有document.close()方法,不这样做 就不能显示图片和表单。并且,任何后面调用的document.write()方法只会把内容追加到页面后,而不会清除现有内容来写入新值。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<script>
(function()
{
var isIE = !!( window.attachEvent && !window.opera );
function $( id )
{
return document.getElementById( id ) || id;
}
function appendHTML( p, str )
{
p = $( p );
var tmp = document.createElement( 'div' );
tmp.innerHTML = str;
while ( tmp.firstChild )
{
p.appendChild( tmp.firstChild );
}
}
function each( a, func )
{
for ( var i = 0, j = a.length; i < j; i ++ )
{
func( i, a[ i ] );
}
}
function eval_inner_JS( el )
{
var _write = document.write;
var _writeln = document.writeln;
document.write = function( str )
{
_inner_js.push( str );
}
document.writeln = function( str )
{
_inner_js.push( str + '\n' );
}
var _inner_js = [];
var _js = $( el ).getElementsByTagName( 'script' );
var _js_qu = [];
each( _js, function( i, v )
{
_js_qu.push( v );
});
_js = null;
function reset()
{
document.write = _write;
document.writeln = _writeln;
}
function renderHTML( s )
{
if ( _inner_js.length !== 0 )
{
var tmp = document.createDocumentFragment();
appendHTML( tmp, _inner_js.join( '' ) );
s.parentNode.insertBefore( tmp, s );
}
}
function loadJS()
{
var s = _js_qu.shift();
if ( !s )
{
return;
}
_inner_js = [];
if ( !s.src )
{
eval( s.innerHTML );
renderHTML( s );
loadJS();
if ( !_js_qu ) reset();
return;
}
function onload()
{
renderHTML( script );
loadJS();
if ( !_js_qu ) reset();
}
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = s.src;
if ( isIE )
{
script.onreadystatechange = function()
{
if ( ( this.readyState == 'loaded' || this.readyState == 'complete' ) && !this.hasLoad )
{
this.hasLoad = true;
onload();
}
}
}else{
script.onload = onload;
}
s.parentNode.replaceChild( script, s );
}
loadJS();
};
window.eval_inner_JS = eval_inner_JS;
window.$ = $;
})();
</script>
<body>
<div id="test"></div>
<script>
$( 'test' ).innerHTML = [
'<p>动感超人i</p>',
'<script>document.write("aaa");</sc' + 'ript>',
'<script>','document.write( \'<p>动感光波</p>\' );',
'</s' + 'cript>'].join( '' );
eval_inner_JS( 'test' );
</script>
</body>
</html>