现在我能够实现当前页面的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也能够进行内容切换调用?

解决方案 »

  1.   

    <iframe id="main" name="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><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>
      

  2.   


    哎呀呀,貌似不行啊,是这样弄么?
    首页:<!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>
      

  3.   

    你这里写错了
    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;
      

  4.   

    谢谢您的回答,
    下面我想让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会显示“此程序无法显示网页”呢?
      

  5.   

    这个问题其实根本用不上js,html本身就能解决,给iframe设置个名字,就OK了<iframe name="myframe" src="page.html"></iframe><a href="http://www.baidu.com" target="myframe"></a>