zoukankan      html  css  js  c++  java
  • 实现innerHTML中javascript的运行,从而使的页面各个模块间更好的交互,和数据共享.

    实现innerHTML中javascript的运行,从而使的页面各个模块间更好的交互,和数据共享.

    在参考前人的一些做法后,采用了一些变通方式,和添加一些额外标记,来较好的实现innerHTML中javascript的运行,从而使的页面各个模块间更

    好的交互,和数据共享.

    先看下面的例子:

    <html>
    <head>
    </head>
    <script>
     var title = "hello";
     var time = 0;
     var author = "vickenyang";
     var email = "ycg01@software.nju.edu.cn";
    </script>
    <body>
     <div id="div_1">
     <SPAN style="display: none">hidden</SPAN>
     hehe
      <!--bs-->
      <script>
       document.write("first");
      </script>
      <!--es-->
      这是第一个页面!
      <br>
      <!--bs-->
      <script>
       time++;
       document.write(title+time+author);
       //alert(time);
       document.write("<br>---------------");
      </script>
      <!--es-->
      <input type="text" name="test" value="test">
     </div>

    <script>
    function refreshDiv(div)
    {
     var html = "";
     function changediv()
     {
      var oldwrite = document.write;
      var oldwriteln = document.writeln;
      document.write = function(str)
      {
       html += str;
      }
      document.writeln = function (str)
      {
       html += str + "\n";
      }
      var htmlTmp = div.innerHTML;
      //ie默认大写,添加为支持firefox,美中不足,会替换所有script值,如果只是ie应用,可注销此行
      htmlTmp = htmlTmp.replace(/script/gi,"SCRIPT");
      //alert(htmlTmp);
      var pos_1 = 0;
      var pos_2 = 0;
      pos_1 = htmlTmp.indexOf("<SCRIPT>",pos_1);
      while(pos_1 != -1)
      {
       html += htmlTmp.substring(pos_2,pos_1);
       var pos_3 = htmlTmp.indexOf("</SCR"+"IPT>",pos_1); 
       html += htmlTmp.substring(pos_1,pos_3+"<-SCRIPT>".length);
       pos_2 = pos_1+"<SCRIPT>".length;
       eval(htmlTmp.substring(pos_2,pos_3));
       pos_2 = htmlTmp.indexOf("<!--es-->",pos_3);
       pos_1 = htmlTmp.indexOf("<SCRIPT>",pos_1+1);
      }
      html += htmlTmp.substring(pos_2,htmlTmp.length);
      document.write = oldwrite;
      document.writeln = oldwriteln;
     }
     eval("changediv();");
     div.innerHTML = html;
    }

    function change()
    {
     refreshDiv(document.getElementById('div_1'));
    }
    function change2()
    {
     document.write("over");
    }
    </script>
    <input type="button" value="change" onclick="change();">
    <input type="button" value="change2" onclick="change2();">
    </body>
    </html>

    步骤:
    1.在div的第一行加上<SPAN style="display: none">hidden</SPAN>(不这么做,ie会忽略首位的js)
    2.在div中每一个js的前后加上<!--bs--><!--es-->标记.

    原理:代码会告诉你的.如果你有更好的方法,请邮件联系,共同探讨.

    补:

    function refreshDiv(div)
    {
     var html = "";

    如果在特殊的应用中用到递归调用,可以将此处的html 定义为全局变量,这样,保证递归刷新时候,显示的是最后一个页面.(如,你想在ajax中,异步load数据,在回调函数中指定刷新div的时候就可能用到)

    下面的例子中有具体的应用:一个基于ajax的,个性网页构建雏形

    http://bbs.nju.edu.cn/file/Y/ycg/obj.rar 

  • 相关阅读:
    CodeForces 681D Gifts by the List (树上DFS)
    UVa 12342 Tax Calculator (水题,纳税)
    CodeForces 681C Heap Operations (模拟题,优先队列)
    CodeForces 682C Alyona and the Tree (树上DFS)
    CodeForces 682B Alyona and Mex (题意水题)
    CodeForces 682A Alyona and Numbers (水题,数学)
    Virtualizing memory type
    页面跳转
    PHP Misc. 函数
    PHP 5 Math 函数
  • 原文地址:https://www.cnblogs.com/winner/p/756269.html
Copyright © 2011-2022 走看看