jsp 内嵌网页内容
jsp 内嵌网页内容
ZZzzz~may wind
<Iframe src="" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src:文件的门路,既可是HTML文件,也可能是文本、ASP等;
width、height:"画中画"区域的宽与高;
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,假设设置为NO,则不出现滚动条;如为Auto:则主动出现滚动条;如为Yes,则显示;
frameborder:区域边框的宽度,为了让“画中画“与临近的内容相融合,常设置为0。
比如:
<Iframe src="";width="250" height="200" scrolling="no" frameborder="0"></iframe>
窗口与浮动帧之间的相互控制
在脚本言语与对象层次中,蕴含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>
<h1id="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 onclick="alert(tt.myH1.innerHTML)"><Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1id="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 src="页面" width="宽度" height="高度" align="陈列可能是left或right,center" scrolling="能否有滚动条可能填no或yes"></iframe>
<IFRAME frameBorder=0frameSpacing=0height=25marginHeight=0marginWidth=0scrolling=no
name=main src="" width=300></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=Out1STYLE="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="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="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快!"></TD>
</TR>
</TABLE>
下面这段代码可能完成IFrame自顺应高度,即随着页面的长度,主动顺应免得除页面和IFrame同时出现滚动条。
源代码如下
<script type="text/javascript">
//**iframe主动顺应页面**//
//输入你宿愿依据页面高度主动调整高度的iframe的称号的列表
//用逗号把每个iframe的ID分隔.例如:["myframe1","myframe2"],可能只要一个窗体,则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//假设用户的阅读器不支持iframe能否将iframe隐藏yes示意隐藏,no示意不隐藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for(i=0;i<iframeids.length;i++)
{
if(document.getElementById)
{
//主动调整iframe高度
dyniframe[dyniframe.length]=document.getElementById(iframeids);
if(dyniframe&&!window.opera)
{
dyniframe.style.display="block"
if(dyniframe.contentDocument&&dyniframe.contentDocument.body.offsetHeight)//假设用户的阅读器是NetScape
dyniframe.height=dyniframe.contentDocument.body.offsetHeight;
else if(dyniframe.Document&&dyniframe.Document.body.scrollHeight)//假设用户的阅读器是IE
dyniframe.height=dyniframe.Document.body.scrollHeight;
}
}
//依据设定的参数来解决不支持iframe的阅读器的显示成绩
if((document.all||document.getElementById)&&iframehide=="no")
{
var tempobj=document.all?document.all[iframeids]:document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if(window.addEventListener)
window.addEventListener("load",dyniframesize,false)
else if(window.attachEvent)
window.attachEvent("onload",dyniframesize)
else
window.onload=dyniframesize
</script>