iframe跳转的纠结有关问题（求大神给个实现思路）
日期：2014-05-16 浏览次数：20923 次
iframe跳转的纠结问题（求大神给个实现思路）
项目有三个框架:iheader、imain、ifooter。
比如我在iheader的导航上点了一个连接后 imain显示相应的内容。但是iheader的内容会刷新，为了实现导航栏无刷新采用ajax发送数据，但是这样浏览器的地址栏不变化这不是想要的结果，我需要地址跟着变化不然一刷新又回到主页了。
------解决方案--------------------
导航链接用锚点的形式，然后点击导航链接的时候，用onclick事件在内容iframe里打开页面。这样即保证了地址栏变化，也保证了正确跳转。如果需要地址栏地址是可以直接打开的，再加一个加载时的函数就行了。
我给你一个例子，我这个导航是直接写在主页面里的。你可以根据需要改到headframe里。
项目有三个框架:iheader、imain、ifooter。
比如我在iheader的导航上点了一个连接后 imain显示相应的内容。但是iheader的内容会刷新，为了实现导航栏无刷新采用ajax发送数据，但是这样浏览器的地址栏不变化这不是想要的结果，我需要地址跟着变化不然一刷新又回到主页了。
------解决方案--------------------
导航链接用锚点的形式，然后点击导航链接的时候，用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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
