iframe标签，子窗口页面更换刷新。

最新推荐文章于 2023-07-11 14:16:59 发布

原创最新推荐文章于 2023-07-11 14:16:59 发布 · 4.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #子窗口

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过使用iframe标签来优化网站导航的方法，这种方式可以让用户在点击导航栏时仅改变子窗口的内容而不跳转页面，提高了用户体验。文章详细解释了如何通过JavaScript控制iframe的src属性来实现这一功能。

毕设项目中对功能进行划分，大约分为六类，这些都在主页的一个导航栏中，原来是打算，对每一个划分都作为一个链接，点击后跳转到另一个页面，但是现在主流网站大部分并非如此做法，例如：点击导航栏中的某一个按钮，而这个导航栏一般在整体页面上方或者左侧，点击按钮后，页面主体并未发生变化，发生变化的仅仅是下方或者右侧，称为子窗口。

实现原理：iframe标签,在一个合适的位置添加iframe标签，这里用的就是导航栏在上方，子窗口在下方的例子，如：
导航栏看自己喜好，关键的是button，onclick属性。

<li style="margin-right: 5px;background-color: #ffffff;"><a href="#" style="color: #000000" onclick="changeToMainPage()">首页</a>
</li>
<li style="margin-right: 5px;"><button class="dropdown-toggle"                                                         style="color:#fff;margin-left: 10px;background:none;border:0;cursor:pointer;position: relative;top: 11px;"                                                       type="button"  onclick="changeToTeamTravel()">×××</button></li>

上方代码块中，onclick中涉及两个function，changeToMainPage()、changeToTeamTravel()。
子窗口代码块：id为iframe1。

<div class="row">
<iframe name="iframe1" id="iframe1" src="newworks.jsp" width="100%" height="100%">

</iframe>
</div>

js：获取id，更改其src。

<script language="JavaScript">
    function changeToMainPage(){
        var iframe1=document.getElementById("iframe1");
        iframe1.src="/lv/mainpage/mainpage.jsp";
        return true;
    }
    function changeToTeamTravel(){
        var iframe1=document.getElementById("iframe1");
        iframe1.src="help.jsp";
        return true;
    }
</script>