zoukankan      html  css  js  c++  java
  • iframe结构的网站按F5刷新子页面的实现方式

    有的网站或者后台系统由于页面有公共的部分,比如菜单,会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个iframe中,之后的请求改变iframe的内容。但是这样会有一个问题,因为浏览器的url是父页面的链接,当你按F5刷新的时候,并不是刷新iframe所对应的页面,而是刷新了父页面,使系统回到了最初的位置,这样对操作是很不爽的。

    比如,页面的格式是这样的。

    其中index是父页面,main_ifram是iframe对应的页面。

    在index的部分,添加如下js代码,用来监听在index页面的F5的刷新操作。


    $("body").bind("keydown",function(event){
    if (event.keyCode == 116) {
    event.preventDefault(); //阻止默认刷新
    $("#main_frame").attr("src",window.frames["main_frame"].src);

    }
    })
    这样,当鼠标点击过index页面的部分后,按F5刷新,就会重新刷新iframe的页面。但是如果鼠标点击过iframe的页面,再按F5,仍然回到了最初的位置。

    在每个的iframe的页面,添加以下js代码,监听iframe对应的页面的F5的刷新操作。


    $("body").bind("keydown",function(event){
    if (event.keyCode == 116) {
    event.preventDefault(); //阻止默认刷新
    //location.reload();
    //采用location.reload()在火狐下可能会有问题,火狐会保留上一次链接
    location=location;
    }
    })
    你可以将这部分提取出来,每个需要的页面引用即可

  • 相关阅读:
    树莓派研究笔记(2)-- 安装Nginx 服务器,PHP 和 SQLite
    树莓派研究笔记(1)-- 安装Mono
    Qemu虚拟机 玩树莓派最新版系统 (截止2017-04-10)
    CLRInjection
    CLRMonitor
    Xamarin Mono for VS开发窗体标题(Title)乱码解决方案
    精美3D中国象棋
    怀旧系列(5)----大学时代的疯狂
    怀旧系列(4)----文曲星编程GV-Basic
    怀旧系列(3)----Pascal
  • 原文地址:https://www.cnblogs.com/fengzifengfeng/p/10668142.html
Copyright © 2011-2022 走看看