泉州浮桥网页设计培训班实例笔记HTML DOM 实例(五)-Frame、Frameset 以及 IFrame 对象

FrameFrameset 以及 IFrame 对象   更多培训学习课程内容,请点击”泉州电脑设计培训班

可调整大小和不可调整大小的框架

<html>

<frameset cols=”50%,50%”>

<frame id=”leftFrame” src=”/example/hdom/frame_noresize.html”>

<frame id=”rightFrame” src=”/example/hdom/frame_a.html”>

</frameset>

</html>

带有滚动条和不带有滚动条的框架

<html>

<frameset cols=”50%,50%”>

<frame id=”leftFrame” src=”/example/hdom/frame_scroll.html”>

<frame id=”rightFrame” src=”/example/hdom/frame_a.html”>

</frameset>

</html>

更改两个框架的源

<html>

<frameset id=”myFrameset” cols=”50%,50%”>

<frame id=”leftFrame” src=”/example/hdom/frame_src.html”>

<frame id=”rightFrame” src=”/example/hdom/frame_a.html”>

</frameset>

</html>

跳出框架

<html>

<head>

<script type=”text/javascript”>

function breakout()

{

if (window.top!=window.self)

{

window.top.location=”/example/hdom/tryjs_breakout.htm”

}

}

</script>

</head>

<body>

 

<input type=”button” onclick=”breakout()” value=”跳出框架!”>

 

</body>

</html>

更改两个框架的源

<html>

<head>

<script type=”text/javascript”>

function changeSource(){

document.getElementById(“frame1″).src=”/example/hdom/frame_c.html”

document.getElementById(“frame2″).src=”/example/hdom/frame_d.html”

}

</script>

</head>

<body>

<iframe src=”/example/hdom/frame_a.html” id=”frame1″></iframe>

<iframe src=”/example/hdom/frame_b.html” id=”frame2″></iframe>

<br /><br />

<input type=”button” onclick=”changeSource()” value=”改变两个框架的 source”>

</body></html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注