js:限制页面必须在框架内·完美版:保证父框架启动的后,自动打开原来页面!

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

 

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

 

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

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

 

这段代码很简单,也很简陋,比如说,你要打开A页面(我们称之为原始请求),A页面运行上面的代码,启动了index.htm。这是时候,index.htm里面有一个框架,框架默认打开一个页面。这个默认页面如果恰发阳A还好,如果不是A呢?想想看,就会这样:输入一个页面地址a.html,结果页面变换成一个不知道是什么样的情况,用户会怎么想?我要的不是这个呀?

 

当然,通常情况下,在index.htm里面,我们可能会加上一个指向a的链接。进入index.htm之后点击链接,重新打开A页面。

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

 

我曾经想过一个解决办法:向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.hmtl里的主要代码:

 

    if (top.location == self.location) { 
        addCookie('adminGoto',self.location.href,2,getPath());
			//alert('all cookie:/n' + document.cookie + '/n/n adminGoto' + getCookie('adminGoto'));
        top.location='index.htm';
    } 
	function getPath()
	{
		return UrlRegEx(location.href)[4];	
	}
	
    
index.htm的主要代码(里面保留了,通过url跳转的代码)
    function getRequestQueryString(key)
    {
        var QueryString = location.search;
        if(QueryString.indexOf("?")!= -1)
        {
            var str = QueryString.substr(1);
            var arr = str.split("&");
            for(var i = 0 ; i<arr.length; i++)
            {
                if(key == arr[i].split("=")[0])
                {
                    return arr[i].split("=")[1];            
                }
            }
        }
        return null;
    }
       
        if(getRequestQueryString("url")){
			location.href = 'index.aspx';
            mainFrame.src = getRequestQueryString("url");
        }
        if(getCookie('adminGoto') != '')
        {
			var mainFrame = $('mainFrame');
            mainFrame.src = getCookie('adminGoto');		
            delCookie('adminGoto');
        }

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、博客园(排名不分先后)

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值