转载请在页首注明作者与出处

http://www.cnblogs.com/zhuxiaojie/p/5990262.html

前言:

在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗口,而外面的是菜单部分,这样就可以借助iframe,只刷新内容部分,而不刷新其它的部分。

好处:(1)给用户的视觉效果要好,用户看到的不会是要刷新整个页面。

(2)加载的资源要少,所以用时更少,而且消耗服务器的流量会少一点。

(3)统一管理菜单内容,不需要每个页面都写菜单,增加,修改方便。

缺点:(1)不利于SEO。

(2)点击浏览器的刷新按钮后,原有的页面丢失,跳转到默认设置好的页面。

因为通常采取iframe的作法会用在菜单多的情况,一般是管理后台,所以不考虑SEO。

那么现在来解决一下第二个缺点,就是刷新页面后,iframe中原有的页面丢失的情况。

一:锚点

我们借助锚点来实现这个功能。至于锚点是什么,它可以标记一个页面中的一个部分,url中以#后面跟随的就是锚点,然后会直接定位到锚点的内容。

http://localhost:8030/#footer

假定上面的footer锚点可直接定位到页尾(当然,这里不介绍怎么定义一个锚点)。

二:思路

思路:因为定位到锚点是不会进行页面的刷新的,假如说我们可以监听url中锚点的变化,是否可以根据这个锚点的内容通过js去设置iframe中的值呢?

答案是可以的。

三:实现

3.1:监听锚点的变化

整个过程实现最为核心的部分就是,要监听到锚点的变化。可以想像,它是一个事件,但是这个事件是比较冷门的,平时都没有听说过这个事件,那就是onhashchange事件

window.onhashchange = function(){
alert("发生变化");
}

要怎么拿到锚点的内容呢?

window.onhashchange = function(){
var hash = location.hash;
hash = hash.substring(1,hash.length);
alert(hash);
}

至于前面为什么要对字符串进行截取,是因为通过location.hash拿到的内容,最前面是#,所以通过substring把#去掉。

3.2:设置iframe地址

既然能监听锚点的变化,又能拿到锚点的值,那么剩下的就简单了。

假定我们锚点的内容就是iframe的url的值,

剩下的代码是

window.onhashchange = function(){
var hash = location.hash;
hash = hash.substring(1,hash.length);
$("#baseIframe").attr("src","<%=path%>" + url);
}

这样就完成了。每当锚点发生变化的时候, 我们就把新的地址设置到了iframe中。

3.3:设置锚点

那么,我们要如何设置锚点呢?在点击菜单的时候, 调用下面的这个方法,然后我们设置锚点。

function loadIframe(url){
var u = window.location.href;
var end = u.indexOf("#");
var rurl = u.substring(0,end);
//设置新的锚点
window.location.href = rurl + "#" + url;
}

至于为什么又要截取字符串,因为每次获取互的href中,都会有以前的锚点,所以我们需要把以前的锚点给去掉,然后来设置新的锚点。

3.4:当页面载入时设置iframe地址

现在的情况已经很好了,现在每当菜单点击的时候,我们都会设置一次锚点,然后假定我们现在刷新浏览器的页面,但是刷新归刷新,url上面的锚点还是会在的。

我们只要在浏览器加载的时候,设置iframe中的值就可以了。

document.addEventListener('DOMContentLoaded', function () {
var hash = location.hash;
var url = hash.substring(1,hash.length);
$("#baseIframe").attr("src", url);
}, false)

我这里要截取字符串的原因,同3.1部分的原因一致,当页面加载完后,就设置iframe中的值,所以这样无论怎么刷新,都不会丢失原有的页面了。

解决iframe作为子窗口,刷新后iframe页面跳转到其它页面的问题的更多相关文章

  1. showModalDialog()子窗口刷新父窗口

    今天再次使用showModalDialog(),发现了两个问题,一是子窗口如何刷新父窗口,二是窗口的参数问题. 1 子窗口刷新父窗口 如果是window.open();问题就好办,直接用window. ...

  2. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  3. tp3.2控制器返回时关闭子窗口刷新父页面

    我的项目操作都是在子页面弹窗中执行,当我操作成功或失败时,都要关闭当前子窗口,刷新父页面: $this->assign('jumpUrl',"javascript:window.par ...

  4. 解决:spring security 登录页停留时间过长 跳转至 403页面

    前言:最近的项目中用到了spring security组件,说句显low的话:我刚开始都不知道用了security好不勒,提了bug,在改的过程中,遇到了一些问题,找同事交流,才知道是用的securi ...

  5. WPF 解决弹出模态窗口关闭后,主窗口不在最前

    本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口.使用另一个窗口在模态窗口前面.从任务栏打开模态窗口.关闭模态窗口.这时发现,主窗口会在刚才使用的另一个窗口下面 这是 Windows ...

  6. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  7. js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

  8. 从A页面跳转到B页面,从B页面按浏览器自带按钮返回到A页面并且刷新页面--手机操作浏览器自带返回并自带刷新

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. A页面跳转到B页面后打开指定tabs标签

    A页面: <!DOCTYPE html><html lang="en" class="no-js">    <head>   ...

随机推荐

  1. 五、jquery使用工具函数

    工具函数对应的网址在 http://api.jquery.com/categouy/utilities/   工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作 ...

  2. AX2012自定义注释脚本开发

    废话少说,直接进入主题: 1.在类xppSource中增加一个类似的方法: eg. Source ifElse(Source _condition = '', Source _ifStatement ...

  3. 清空form表单下所有的input值-------------jquery

    $(':input','#' + formid).not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('s ...

  4. 支付宝集成SDK 报错

    1.打开Demo中的错误 这是路径错误导致 解决办法:在Build Settings 中找到 Library Search Paths ,去掉其中的 /// 2.自己集成支付宝SDK时的错误 这个也是 ...

  5. OC动态创建的问题变量数组.有数组,在阵列13要素,第一个数据包阵列,每3元素为一组,分成若干组,这些数据包的统一管理。最后,一个数组.(要动态地创建一个数组).两种方法

    <span style="font-size:24px;">//////第一种方法 //        NSMutableArray *arr = [NSMutable ...

  6. Redis的学习

    单线程架构可参考:https://blog.csdn.net/sunhuiliang85/article/details/73656830

  7. xtrabackup 2.4.3 BUG

    用XtraBackup对备份集进行apply log 的时候,卡在 xtrabackup 版本:2.4.3 InnoDB: Waited for 1535930 seconds for 128 pen ...

  8. vNetwork Standard Switch(vSS)和vNetwork Distributed Switch(vDS)的区别

    vSS: vSwitches are configured on each ESXi/ESX host. vDS: The configuration of vDS is centralized to ...

  9. MongoDB的php可视化管理工具

    使用MongoDB命令查看很不方便 于是想把爬来的数据导出来,看爬来的数据是否正确 打开cmd,执行 mongoexport -d test -c blogs --csv -f title,link, ...

  10. PHP代码审计笔记--变量覆盖漏洞

    变量覆盖指的是用我们自定义的参数值替换程序原有的变量值,一般变量覆盖漏洞需要结合程序的其它功能来实现完整的攻击. 经常导致变量覆盖漏洞场景有:$$,extract()函数,parse_str()函数, ...