js:限制页面必须在框架内·完美版：保证父框架启动的后，自动打开原来页面！（文字修改）

asp.net支持母板页了，这是一个相当强大而实用的功能，不过iframe框架页面还有它的生存空间。比如说网站的后台管理界面，比如说应用软件。

 

使用框架页有一个事情需要注意，那就是打开子页面的时候需要保存子页面始终被嵌套在父页面的里面。解决这个问题有一个简单的办法，就是在子页面里面加上一段js:

 

    if (top.location == self.location) { 
        top.location='index.htm';
    }

这段代码的意思就是，现在整个浏览器窗口中，最上面层次的页面是不是当前页面？如果是的话，那就打开父框架页面。

 这段代码很简单，也很简陋，之前网络上的介绍都是只给出了这样的“半个解决方案”，实际的效果是：你要打开a.htm页面（我们称之为原始请求），a.htm页面运行上面的代码，启动了index.htm。这个时候，index.htm里面有一个框架，框架却默认打开另一个页面w.htm。当然，通常情况下，在index.htm里面，我们可能会加上一个指向a的链接。进入index.htm之后点击链接，重新打开A页面。

但是这样子不好，打断了用户体验。

就有用户提出：我想看a.htm，打开之后却跳了w.htm，然后我还得去找到a.htm链接再打开。

所以，我最后决定，要找到一个比较完善的方案：请求a.htm，启动index.htm，index.htm再通过框架启动a.htm。页面虽然有一些切换，但是能保证，用户想看到a.htm结果看到的也就是a.htm，并且a.htm还被index.htm的框架包着。 

我曾经想过一个解决办法：向index.htm传递url参数。比如：top.location='index.htm?url=a.html'   这个办法用了一段时间，后来发现这个办法也有缺陷。出现问题的状况是这样的：a.html放在admin/下面，index.htm也放在admin/下面。在地址栏里输入admin/a.html，结果打开admin/index.htm?url =http://localhost/xxxx/admin/a.html

而且在index.htm也正常显示了A页面。

 

但是，admin这个目录是需要用户权限的。当admin/index.htm?url =http://localhost/xxxx/admin/a.html超时之后，asp.net把页面跳转到了/user_login.aspx。这时候的地址栏是http://localhost:xxxxx/xxxx/user_login.aspx?return=admin/index.htm?url =http://localhost/xxxx/admin/a.html！并且报错！

 

于是我就想到了用cookies。并且，基本上已经成功了。


下面是主要功能说明：

  • 主要用于框架（iframe）程序
  • 现在演示的是htm页面，也适用于asp/asp.net，当然jsp或者php也应该能用，不过我本人不感兴趣，没有测试过。
  • 打开目标页面（a.html）之后，目标页面后自动启动父框架文件(index.htm)。
  • 目标页面启动父框架之前，会把目标页面的地址存入cookies，父框架启动后读取cookies，并且用目标页面替换掉，默认页面。
  • 容错一：父框架读取cookies之后设置cookies失效。
  • 容错二：存入cookies时，指定了path（也可以指定domain），防止进入不合适的路径下读取cookies错误。
  • 可以通过UrlRegEx()函数动态获取路径和域名。

a.html里的主要代码：

 

view plaincopy to clipboardprint?
  1.    if (top.location == self.location) {    
  2.        addCookie('adminGoto',self.location.href,2,getPath());   
  3.         //alert('all cookie:\n' + document.cookie + '\n\n adminGoto' + getCookie('adminGoto'));   
  4.        top.location='index.htm';   
  5.    }    
  6. function getPath()   
  7. {   
  8.     return UrlRegEx(location.href)[4];     
  9. }   
  10.   
  11.      
 

index.htm的主要代码（里面保留了，通过url跳转的代码）

view plaincopy to clipboardprint?
  1.  function getRequestQueryString(key)   
  2.  {   
  3.      var QueryString = location.search;   
  4.      if(QueryString.indexOf("?")!= -1)   
  5.      {   
  6.          var str = QueryString.substr(1);   
  7.          var arr = str.split("&");   
  8.          for(var i = 0 ; i<arr.length; i++)   
  9.          {   
  10.              if(key == arr[i].split("=")[0])   
  11.              {   
  12.                  return arr[i].split("=")[1];               
  13.              }   
  14.          }   
  15.      }   
  16.      return null;   
  17.  }   
  18.        
  19.      if(getRequestQueryString("url")){   
  20. location.href = 'index.aspx';   
  21.          mainFrame.src = getRequestQueryString("url");   
  22.      }   
  23.      if(getCookie('adminGoto') != '')   
  24.      {   
  25. var mainFrame = $('mainFrame');   
  26.          mainFrame.src = getCookie('adminGoto');           
  27.          delCookie('adminGoto');   
  28.      }  

comm.js是分离出来的js代码，主要包含两部分内容：操作cookie，通过url获取域名、路径、文件名等。

示例下载（csdn）

注意：一个网友来信说代码不能正常运行，结果我检查发现“C:\MxDownload\xpnew_code\xpnew_code\a.html”这种方式测试肯定是不行的，因为我的正则里面不能解析这种地址。

http://download.csdn.net/source/564196

关于更新：

程序不断完善中，最新版本请留意我的博客http://blog.csdn.net/xpnew/或者http://xpnew.cnblogs.com/。

欢迎提出批评和建议，那是我的荣幸，来信请寄：xpnew#126.com(请替换#为@)。
特别感谢：无忧脚本、csdn、博客园（排名不分先后）

posted @ 2008-07-31 17:11  柳城之城  阅读(7527)  评论(4)  编辑  收藏  举报