现在我能够实现当前页面的iframe内容的切换JS代码如下:
<script language="javascript" type="text/javascript">//页面跳转
function goURL(urla,urlb)
{
var urla
var urlb
main.location.href=urla;
side.location.href=urlb;
document.getElementById('main').width="671px";
document.getElementById("side").width='281px';
}
</script>导航按钮代码:
<a href="#" onClick="javascript:goURL('ind_left.html','ind_right.html');">我的主页</a>
<a href="#" onClick="javascript:goURL('nav_cwgl.html','right.html');">查询服务</a>iframe代码:
<iframe id="main" src="ind_left.html" frameborder="0" scrolling="No" onload="this.height=this.contentWindow.document.body.scrollHeight" width="671"></iframe>
<iframe id="side" src="ind_right.html" frameborder="0" scrolling="No" onload="this.height=this.contentWindow.document.body.scrollHeight" width="281"></iframe>现在客户要求,需要在左侧iframe被嵌入的页面中,在嵌入左右两个iframe;
也就是说父级页面有两个iframe,被嵌套页也有2个iframe。
这样如何才能使点击导航后,子页面的2个iframe也能够进行内容切换调用?
<script language="javascript" type="text/javascript">//页面跳转
function goURL(urla,urlb)
{
var urla
var urlb
main.location.href=urla;
side.location.href=urlb;
document.getElementById('main').width="671px";
document.getElementById("side").width='281px';
}
</script>导航按钮代码:
<a href="#" onClick="javascript:goURL('ind_left.html','ind_right.html');">我的主页</a>
<a href="#" onClick="javascript:goURL('nav_cwgl.html','right.html');">查询服务</a>iframe代码:
<iframe id="main" src="ind_left.html" frameborder="0" scrolling="No" onload="this.height=this.contentWindow.document.body.scrollHeight" width="671"></iframe>
<iframe id="side" src="ind_right.html" frameborder="0" scrolling="No" onload="this.height=this.contentWindow.document.body.scrollHeight" width="281"></iframe>现在客户要求,需要在左侧iframe被嵌入的页面中,在嵌入左右两个iframe;
也就是说父级页面有两个iframe,被嵌套页也有2个iframe。
这样如何才能使点击导航后,子页面的2个iframe也能够进行内容切换调用?
<iframe id="side" src="ind_right.html" frameborder="0" scrolling="No" onload="this.height=this.contentWindow.document.body.scrollHeight" width="281"></iframe><script language="javascript" type="text/javascript">//页面跳转
function goURL(urla,urlb,urlc)
{
alert(urlc);
document.getElementById("main").contentWindow.document.getElementById("ind_left_1").contentWindow.document.location.href=urlc;
}
</script>导航按钮代码:
<a href="#" onClick="javascript:goURL('ind_left.html','ind_right.html','ind_left_2.html');">我的主页</a> <iframe id="ind_left_1" name="ind_left_1" src="ind_left_1.html" frameborder="0" scrolling="No" width="300"></iframe>
<iframe id="ind_right_2" src="ind_right_2.html" frameborder="0" scrolling="No" width="371"></iframe>
哎呀呀,貌似不行啊,是这样弄么?
首页:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">//页面跳转
function goURL(urla,urlb,urlc)
{
alert(urlc);
document.getElementById("main").contentWindow.document.getElementById("left.html").contentWindow.document.location.href=urlc;
}
</script>
</head><body><table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><a href="#" onClick="javascript:goURL('left.html','center.html','iright.html');">我的主页</a></td></tr>
<tr><td colspan="2"><a href="#" onClick="javascript:goURL('left2.html','center2.html','iright2.html');">我的主页2</a></td></tr>
<tr>
<td><iframe style="border:1px solid #f00" id="main" name="main" src="iframe.html" frameborder="0" scrolling="No" onload="this.height=this.contentWindow.document.body.scrollHeight" width="300"></iframe></td>
<td><iframe style="border:1px solid #f00" id="side" src="right.html" frameborder="0" scrolling="No" onload="this.height=this.contentWindow.document.body.scrollHeight" width="200"></iframe></td>
</tr>
</table></body>
</html>
左侧iframe页:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><iframe id="ind_left_1" name="ind_left_1" src="left.html" frameborder="0" scrolling="No" width="100"></iframe></td>
<td><iframe id="ind_right_2" src="center.html" frameborder="0" scrolling="No" width="200"></iframe></td>
</tr>
</table>
</body>
</html>
document.getElementById("main").contentWindow.document.getElementById("left.html").contentWindow.document.location.href=urlc;改为
document.getElementById("main").contentWindow.document.getElementById("ind_left_1").contentWindow.document.location.href=urlc;
下面我想让id="ind_right_2"也要随之切换,将您的代码修改了下,如下:
<script language="javascript" type="text/javascript">//页面跳转
function goURL(urla,urlb,urlc,urld)
{
var urla
var urlb
side.location.href=urlb;
document.getElementById("side").width='200px';
alert(urlc,urld);
document.getElementById("main").contentWindow.document.getElementById("liframe").contentWindow.document.location.href=urlc;
document.getElementById("main").contentWindow.document.getElementById("riframe").contentWindow.document.location.href=urld;
}
</script>
为什么,当我点击“我的主页2"之后,ind_right_2对应的iframe会显示“此程序无法显示网页”呢?