52,797
社区成员
发帖
与我相关
我的任务
分享iframe跳转的纠结问题（求大神给个实现思路）
项目有三个框架:iheader、imain、ifooter。
比如我在iheader的导航上点了一个连接后 imain显示相应的内容。但是iheader的内容会刷新，为了实现导航栏无刷新采用ajax发送数据，但是这样浏览器的地址栏不变化这不是想要的结果，我需要地址跟着变化不然一刷新又回到主页了。
比如我在iheader的导航上点了一个连接后 imain显示相应的内容。但是iheader的内容会刷新，为了实现导航栏无刷新采用ajax发送数据，但是这样浏览器的地址栏不变化这不是想要的结果，我需要地址跟着变化不然一刷新又回到主页了。
...全文
请发表友善的回复…
发表回复
wzhiyuan 2014-04-12
- 打赏
- 举报
导航链接用锚点的形式，然后点击导航链接的时候，用onclick事件在内容iframe里打开页面。这样即保证了地址栏变化，也保证了正确跳转。如果需要地址栏地址是可以直接打开的，再加一个加载时的函数就行了。
我给你一个例子，我这个导航是直接写在主页面里的。你可以根据需要改到headframe里。
f<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>框架页</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" >
function openContentByHash(hash) {
switch(hash)
{
case "#products":
$("#framecontent").attr("src", "projects.html");
break;
case "#contact":
$("#framecontent").attr("src","contact.html");
break;
default:
$("#framecontent").attr("src", "about:blank;");
}
}
</script>
</head>
<body>
<div id="nav"> <a href="#products">产品</a> <a href="#contact">联系我们</a></div>
<iframe id="framecontent" name="framecontent" src="about:blank;" frameborder="1" scrolling="auto"></iframe>
<script type="text/javascript" >
$("#nav a").click(function () {
openContentByHash($(this).attr("href"));
});
if (window.location.hash != "") {
openContentByHash(window.location.hash);
}
</script>
</body>
</html>
