基本信息
源码名称：使用iframe实现点击导航无刷新切换页面
源码大小：0.13M
文件格式：.zip
开发语言：CSS
更新时间：2019-05-01
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
使用iframe实现点击导航页面无刷切换，使用bootstrap布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>IframeDemo</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/script/jquery-1.11.1.js"></script>
    <script src="static/script/bootstrap.min.js"></script>

</head>
<body >
<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>




</body>
</html>