使用iframe实现点击导航无刷新更换页面

来源：互联网发布：怎么弄二级三级域名编辑：程序博客网时间：2024/06/05 20:13

在实现点击导航无刷新更换页面方法有好几种，iframe方式算是比较老的方法，但是它有它的好处，在使用iframe的时候不用考虑样式的覆盖，只需要对切换的页面设置好样式就可以了，不说了直接看例子吧，这些大家都知道

<nav class="navbar navbar-default">    <div class="navbar-header">        <a href="#" class="navbar-brand">IframeDemo</a>    </div>    <ul class="nav navbar-nav">        <li class="active"><a href="templates/home.html" target="mainiframe"> Home</a></li>        <li><a href="templates/blog.html" target="mainiframe">Blog</a></li>        <li><a href="templates/about.html" target="mainiframe">About</a></li>    </ul></nav><div>    <iframe name="mainiframe" src="templates/home.html" id="mainiframe" scrolling="no" onload="resizeFrameHeight()" frameborder="0" width="100%"></iframe></div><script type="text/javascript">    function resizeFrameHeight(){        var ifm = document.getElementById("mainiframe");        ifm.height = document.documentElement.clientHeight - 50;    }    window.onresize=function(){        resizeFrameHeight();    }</script>

完整代码：http://download.csdn.net/download/guoqianqian5812/10015610

阅读全文

0 0