在载人页面后,浏览器输出流自动关闭;在此之后,任何一个对当前页面进行操作的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> |