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

最新推荐文章于 2021-08-26 23:00:12 发布

小熊️程序猿

最新推荐文章于 2021-08-26 23:00:12 发布

阅读量314

点赞数

分类专栏： js学习文章标签： JavaScript ViewUI

js学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

[color=cyan][size=x-large]Frame、Frameset 以及 IFrame 对象
[/size][/color]

[b][color=blue]大小可调整和不可调整的框架[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]带滚动条和不带滚动条的框架[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]跳出框架[/color][/b][b][color=orange]代码来自w3school
[/color][/b]


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

[b][color=blue]更改两个框架的员[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[color=cyan][size=x-large]image 对象
[/size][/color]

[b][color=blue]改变图像的大小[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]改变图像的src[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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