Windows LiveWindows Live™
 
 
Profil de Stephen喜欢天空的蓝色PhotosBlogListesPlus Outils Aide

Blog
    28 octobre

    多页面共享子窗口

    这是来自论坛上的一个问题，问题要求多个不同的页面，在打开子页面时，要共用同一个窗口，并且子窗口不能刷新。这跟google音乐里面的添加音乐，然后播放的效果类似。因为在播放音乐的时候，如果子页面刷新了，那么音乐必须从头来播放，自然效果不尽人意。类似的情况也会出现在视频的网站上。
    下面，我们使用简单的Javascript代码来实现这一功能。本代码在目前所有主流浏览器里测试通过。
    下面，先创建一个测试主页面，Test1.htm
    XML/XHTML 代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title></title>
      <script type="text/javascript">
        function winOpen() {
          window.open("winA.htm?music=From_Test1_" + (new Date()).toLocaleString(), "mxh", "width=600,height=300")
        }
      </script>
    </head>
    <body>
      <input type="button" onclick="winOpen()" value="打开子窗口" />
    </body>
    </html>
    接下来，创建WinA.htm
    XML/XHTML 代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Window A</title>
    </head>
    <body>
    <h1>这里是Window A</h1>
    <script type="text/javascript">
      if (window.location.href == window.top.location.href) {
        self.top.location.href = "winB.htm" + window.location.search
      }
      else {
        window.parent.frames["mxh2"].setMusic(window.location.search.substr(1))
      }
    </script>
    </body>
    </html>
    接下来是WinB.htm
    XML/XHTML 代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Window B</title>
    </head>
    <body>
    <iframe name="mxh2" src="winC.htm" style="width:600px;height:400px;" frameborder="0"></iframe>
    <iframe name="mxh" src="winD.htm" style='display:none'></iframe>
    <script type="text/javascript">
      alert("页面刷新检测器")
    </script>
    </body>
    </html>
    WinC.htm
    XML/XHTML 代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Window C</title>
    </head>
    <body>
    <div id="showContent">初始化的内容</div>
        <script type="text/javascript">
          function setMusic(str) {
            document.getElementById("showContent").innerHTML += "<br/>" + str
          }
        </script>
    </body>
    </html>
    WinD.htm
    XML/XHTML 代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Window D</title>
    </head>
    <body>
      <script type="text/javascript">
        window.name = "mxh";
        window.top.name = "";
        window.top.focus();
      </script>
    </body>
    </html>
    然后可以创建多个测试用的页面Test2.htm
    XML/XHTML 代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title></title>
      <script type="text/javascript">
        function winOpen() {
          window.open("winA.htm?music=From_Test2_" + (new Date()).toLocaleString(), "mxh", "width=600,height=300")
        }
      </script>
    </head>
    <body>
      <input type="button" onclick="winOpen()" value="打开子窗口" />
    </body>
    </html>
    在不同的窗口里，打开测试页面，则，都会将内容显示在Window B所在的主体窗口内。并且页面是不刷新的。其原理就是将新开的页面在隐藏的窗口里打开，然后取出来传递的参数，使用javascript来进行数据的传递。其中窗口WinD.htm中的脚本不能少，而且是很关键的地方。
     
    本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/net_lover/archive/2009/10/27/4735224.aspx
    19:43 | Ajouter un commentaire | Lien permanent | Ajouter au blog | 计算机与 Internet
    17 décembre

    重载insertAdjacentElement （兼容ie、firefox）

    if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
    {
     HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
     {
      switch (where){
      case 'beforeBegin':
       this.parentNode.insertBefore(parsedNode,this)
       break;
      case 'afterBegin':
       this.insertBefore(parsedNode,this.firstChild);
       break;
      case 'beforeEnd':
       this.appendChild(parsedNode);
       break;
      case 'afterEnd':
       if (this.nextSibling)
       {
        this.parentNode.insertBefore(parsedNode,this.nextSibling);
       }
       else
       {
        this.parentNode.appendChild(parsedNode);
       }
       break;
      }
     }

     HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)
     {
      var r = this.ownerDocument.createRange();
      r.setStartBefore(this);
      var parsedHTML = r.createContextualFragment(htmlStr);
      this.insertAdjacentElement(where,parsedHTML)
     }


     HTMLElement.prototype.insertAdjacentText = function(where,txtStr)
     {
      var parsedText = document.createTextNode(txtStr)
      this.insertAdjacentElement(where,parsedText)
     }
    }

    吃水不忘挖井人！
    15:23 | Ajouter un commentaire | Lien permanent | Ajouter au blog | 计算机与 Internet
    10 août

    常见排序算法 之 Javascript版

    用JavaScript实现的常见排序算法:冒泡排序,选择排序,插入排序,谢尔排序,快速排序(递归),快速排序(堆栈),归并排序,堆排序。
    具体代码及比较如下所示：

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> 常见排序算法 之 JavaScript版 </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="排序,算法,JavaScript排序" />
    <meta name="description" content="用JavaScript实现的常见排序算法:冒泡排序,选择排序,插入排序,谢尔排序,快速排序(递归),快速排序(堆栈),归并排序,堆排序" />
    <script type="text/javascript">
     Array.prototype.swap = function(i, j)
     {
     var temp = this[i];
     this[i] = this[j];
     this[j] = temp;
     }
     Array.prototype.bubbleSort = function()
     {
     for (var i = this.length - 1; i > 0; --i)
     {
     for (var j = 0; j < i; ++j)
     {
     if (this[j] > this[j + 1]) this.swap(j, j + 1);
     }
     }
     }
     Array.prototype.selectionSort = function()
     {
     for (var i = 0; i < this.length; ++i)
     {
     var index = i;
     for (var j = i + 1; j < this.length; ++j)
     {
     if (this[j] < this[index]) index = j;
     }
     this.swap(i, index);
     }
     }
     Array.prototype.insertionSort = function()
     {
     for (var i = 1; i < this.length; ++i)
     {
     var j = i, value = this[i];
     while (j > 0 && this[j - 1] > value)
     {
     this[j] = this[j - 1];
     --j;
     }
     this[j] = value;
     }
     }
     Array.prototype.shellSort = function()
     {
     for (var step = this.length >> 1; step > 0; step >>= 1)
     {
     for (var i = 0; i < step; ++i)
     {
     for (var j = i + step; j < this.length; j += step)
     {
     var k = j, value = this[j];
     while (k >= step && this[k - step] > value)
     {
     this[k] = this[k - step];
     k -= step;
     }
     this[k] = value;
     }
     }
     }
     }
     Array.prototype.quickSort = function(s, e)
     {
     if (s == null) s = 0;
     if (e == null) e = this.length - 1;
     if (s >= e) return;
     this.swap((s + e) >> 1, e);
     var index = s - 1;
     for (var i = s; i <= e; ++i)
     {
     if (this[i] <= this[e]) this.swap(i, ++index);
     }
     this.quickSort(s, index - 1);
     this.quickSort(index + 1, e);
     }
     Array.prototype.stackQuickSort = function()
     {
     var stack = [0, this.length - 1];
     while (stack.length > 0)
     {
     var e = stack.pop(), s = stack.pop();
     if (s >= e) continue;
     this.swap((s + e) >> 1, e);
     var index = s - 1;
     for (var i = s; i <= e; ++i)
     {
     if (this[i] <= this[e]) this.swap(i, ++index);
     }
     stack.push(s, index - 1, index + 1, e);
     }
     }
     Array.prototype.mergeSort = function(s, e, b)
     {
     if (s == null) s = 0;
     if (e == null) e = this.length - 1;
     if (b == null) b = new Array(this.length);
     if (s >= e) return;
     var m = (s + e) >> 1;
     this.mergeSort(s, m, b);
     this.mergeSort(m + 1, e, b);
     for (var i = s, j = s, k = m + 1; i <= e; ++i)
     {
     b[i] = this[(k > e || j <= m && this[j] < this[k]) ? j++ : k++];
     }
     for (var i = s; i <= e; ++i) this[i] = b[i];
     }
     Array.prototype.heapSort = function()
     {
     for (var i = 1; i < this.length; ++i)
     {
     for (var j = i, k = (j - 1) >> 1; k >= 0; j = k, k = (k - 1) >> 1)
     {
     if (this[k] >= this[j]) break;
     this.swap(j, k);
     }
     }
     for (var i = this.length - 1; i > 0; --i)
     {
     this.swap(0, i);
     for (var j = 0, k = (j + 1) << 1; k <= i; j = k, k = (k + 1) << 1)
     {
     if (k == i || this[k] < this[k - 1]) --k;
     if (this[k] <= this[j]) break;
     this.swap(j, k);
     }
     }
     }
     function generate()
     {
     var max = parseInt(txtMax.value), count = parseInt(txtCount.value);
     if (isNaN(max) || isNaN(count))
     {
     alert("个数和最大值必须是一个整数");
     return;
     }
     var array = [];
     for (var i = 0; i < count; ++i) array.push(Math.round(Math.random() * max));
     txtInput.value = array.join("\n");
     txtOutput.value = "";
     }
     function demo(type)
     {
     var array = txtInput.value == "" ? [] : txtInput.value.replace().split("\n");
     for (var i = 0; i < array.length; ++i) array[i] = parseInt(array[i]);
     var t1 = new Date();
     eval("array." + type + "Sort()");
     var t2 = new Date();
     lblTime.innerText = t2.valueOf() - t1.valueOf();
     txtOutput.value = array.join("\n");
     }
    </script>
    </head>
    <body onload="generate();">
    <table style="font-size:12px;">
    <tr>
     <td align="right">
     <textarea id="txtInput" style="width:120px;height:500px;" readonly></textarea>
     </td>
     <td width="150" align="center">
     随机数个数<input id="txtCount" value="500" style="width:50px" /><br /><br />
     最大随机数<input id="txtMax" value="1000" style="width:50px" /><br /><br />
     <button onclick="generate()">重新生成</button><br /><br /><br /><br />
     耗时(毫秒)：<label id="lblTime"></label><br /><br /><br /><br />
     <button onclick="demo('bubble');">冒泡排序</button><br /><br />
     <button onclick="demo('selection');">选择排序</button><br /><br />
     <button onclick="demo('insertion');">插入排序</button><br /><br />
     <button onclick="demo('shell');">谢尔排序</button><br /><br />
     <button onclick="demo('quick');">快速排序(递归)</button><br /><br />
     <button onclick="demo('stackQuick');">快速排序(堆栈)</button><br /><br />
     <button onclick="demo('merge');">归并排序</button><br /><br />
     <button onclick="demo('heap');">堆排序</button><br /><br />
     </td>
     <td align="left">
     <textarea id="txtOutput" style="width:120px;height:500px;" readonly></textarea>
     </td>
    </tr>
    </table>
    </body>
    </html>

      

    22:06 | Ajouter un commentaire | Lien permanent | Ajouter au blog | 计算机与 Internet