`

js学习之Frame、Frameset 以及 IFrame 对象和image对象

JavaScript 
阅读更多
今天上班又不是很忙,接着学习js相关的东西,毕业后就没怎么学习了,好多东西都是一知半解,做项目的时候百度,过后就忘记了,难得轻松,好好地系统学习下.对于前段的知识都是参考W3school学习的,里面例子多

Frame、Frameset 以及 IFrame 对象


大小可调整和不可调整的框架代码来自w3school 


<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>



带滚动条和不带滚动条的框架代码来自w3school 


<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>


跳出框架代码来自w3school 


<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>


更改两个框架的员代码来自w3school 

<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>


image 对象


改变图像的大小代码来自w3school 


<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("compman").height="270"
document.getElementById("compman").width="164"
}
</script>
</head>

<body>
<img id="compman" src="/i/eg_bulbon.gif" />
<br /><br />
<input type="button" onclick="changeSize()" value="改变图像的高度和宽度">
</body>

</html>


改变图像的src代码来自w3school 


<html>
<head>
<script type="text/javascript">
function changeSrc()
  {
  document.getElementById("myImage").src="/i/eg_smile.gif"
  }
</script>
</head>

<body>
<img id="myImage" src="/i/eg_bulbon.gif" />
<br /><br />
<input type="button" onclick="changeSrc()" value="改变图像">
</body>

</html>


分享到：
| PermGen space错误解决方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics