jsp 内嵌网页内容--iframe

2020-02-05 13:49:25

字体：大中小

来源：转载

供稿：网友

zzzzz~ may wind

　　比如:

　　窗口与浮动帧之间的相互控制
　　在脚本语言与对象层次中，包含iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。

　　1、在父窗体中访问并控制子窗体中的对象
　　在父窗体中，iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
　　现在就有一个问题，即，我们怎样来控制这个iframe，这里需要讲一下iframe对象。当我们给这个标记设置了id 属性后，就可通过文档对象模型dom对iframe所含的html进行一系列控制。

　　比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
　　<iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
　　<html>
　　　<body>
　　　　<h1 id="myh1">hello,my boy</h1>
　　　</body>
　　</html>
　　如我们要改变id号为myh1的h1标记里的文字为hello,my dear，则可用:
　　document.myh1.innertext="hello,my dear"(其中，document可省)
　　在example.htm文件中，iframe标记对象所指的子窗体与一般的dhtml对象模型一致，对对象访问控制方式一样，就不再赘述。

　　2、在子窗体中访问并控制父窗体中对象
　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
　　如example.htm：
　　<html>
　　　<body > 　<iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
　　　　<h1 id="myh2">hello,my wife</h1>
　　　</body>
　　</html>
　　如果要在frame1.htm中访问id号为myh2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
　　parent.myh2.innertext="hello,my friend"
　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

　　iframe虽然内嵌在另一个html文件中，但它保持相对的独立，是一个“独立王国“哟，在单一html中的特性同样适用于浮动帧中。

　　试想一下，通过iframe标记，我们可将那些不变的内容以iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
　　要注意的是，nestscape6.0之前版本不支持iframe标记。

　　例子：

用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓
应该怎么实现呢？

回答：
用下列代码替换网页的<title>..</title>
<script language="javascript">
function scroll(n)
{temp=n;
out1.scrolltop=out1.scrolltop+temp;
if (temp==0) return;
settimeout("scroll(temp)",80);
}
</script>
<table width="330">
<tr>
<td width="304" valign="top" rowspan="2" >
<div id=out1 style="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width:
1px,1px,1px,1px;">
文字<br> 文字<br>
文字<br>
文字<br>
文字
<br>
<br>
</div>
</td>
< td width="14" valign="top"><img src="http://www.CuoXin.com/htmldata/2007-04-25/photo/up0605.gif" width="14" height ="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll (-3)" border="0" alt="按下鼠标速度会更快！"></td>
</tr>
<tr>
< td width="14" valign="bottom"><img src="http://www.CuoXin.com/htmldata/2007-04-25/photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" border="0" width ="15" height="21" alt="按下鼠标速度会更快！"></td>
</tr>
</table>

下面这段代码可以实现iframe自适应高度，即随着页面的长度，自动适应以免除页面和iframe同时出现滚动条。
源代码如下

//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的id分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。

//定义iframe的id
var iframeids=["test"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"

if (window.addeventlistener)
window.addeventlistener("load", dyniframesize, false)
else if (window.attachevent)
window.attachevent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>

其他有参考价值的网址:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //iframe嵌入网页的用法
http://www.phpx.com/man/dhtmlcn/objects/iframe.html //iframe对象
http://www.hoyo.idv.tw/web-program/html/iframe.htm //内嵌框架iframe

上一篇：JSP插入MYSQL数据库后乱码的解决办法

下一篇：用jsp实现SQLServe数据库的备份和恢复