• 解决iframe作为子窗口,刷新后iframe页面跳转到其它页面的问题


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

    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中的值,所以这样无论怎么刷新,都不会丢失原有的页面了。

  • 相关阅读:
    js_mongobd
    window-js-mongodb安装 错误 解决
    Mac-js-mongodb 安装
    PMP笔记-01 PMP各种图比较记忆
    kata qemu
    socat
    kata agent install syslog
    kata rootfs
    defaultKataGuestSharedDir
    kata 9p
  • 原文地址:https://www.cnblogs.com/zhuxiaojie/p/5990262.html
Copyright © 2020-2023  润新知