zoukankan      html  css  js  c++  java
  • 解决document.write问题

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

  • 相关阅读:
    二、计算属性和侦听器
    JS实现 带有话题的文本编辑 + 图片编辑(下)
    JS实现 带有话题的文本编辑 + 图片编辑(上)
    js 监听浏览器切换标签栏 之 更改标题
    Element-ui 自定义表单验证规则
    仿照旧版支付宝生活服务模块-常用应用的添加与删减(下)
    仿照旧版支付宝生活服务模块-滚动定位 + 点击定位(上)
    vue 中实现九宫格抽奖
    vue 中实现大转盘抽奖
    vue 中实现刮刮卡
  • 原文地址:https://www.cnblogs.com/yeer/p/2876393.html
Copyright © 2011-2022 走看看