任务:一个页面里包含两个iframe(暂且叫left iframe和right iframe),现在要求right iframe加载一个特定页面时,立即将此页面在主窗口显示。
这里设计3个页面,index.html、left.html、right.html。其中index中有两个iframe(left iframe和right iframe), left iframe显示页面为left.html,right iframe显示为right.html。
Index.html:
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >index </title>
</head>
< body >
< div id ="container" >
< iframe src ="left.htm" name ="leftFrame" width ="20%" height ="100%" align ="middle" scrolling ="no" />
< iframe src ="right.html" id ="platformFrame" name ="platformFrame" width ="80%" height ="100%" align ="middle" scrolling ="auto" />
</div>
</body>
</html>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >index </title>
</head>
< body >
< div id ="container" >
< iframe src ="left.htm" name ="leftFrame" width ="20%" height ="100%" align ="middle" scrolling ="no" />
< iframe src ="right.html" id ="platformFrame" name ="platformFrame" width ="80%" height ="100%" align ="middle" scrolling ="auto" />
</div>
</body>
</html>
Left.html:
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >index </title>
</head>
< body >
left
</body>
</html>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >index </title>
</head>
< body >
left
</body>
</html>
Right.html:
<
html
>
< head > </head>
< body >
right
</body>
< script type ="text/javascript" language ="javascript" >
<! --window.top:最顶层窗口 window.self:当前窗口 -- >
if (window.top!=window.self)
{
window.top.location='right.html'
}
</script>
</html>
< head > </head>
< body >
right
</body>
< script type ="text/javascript" language ="javascript" >
<! --window.top:最顶层窗口 window.self:当前窗口 -- >
if (window.top!=window.self)
{
window.top.location='right.html'
}
</script>
</html>
以上最主要的就是就是这段JavaScript:
if (window.top!=window.self)
{
window.top.location='right.html'
}
它的意思就是当right.html不为顶层窗口时将它设置为顶层窗口。
当right.html没有这段js时点击index.html页面,将如下显示:
当right.html有这段js时点击index.html页面,将如下显示:
本文转自 yzzh9 51CTO博客,原文链接:http://blog.51cto.com/java999/193770,如需转载请自行联系原作者