iframe 浮动

首先要声明一点:IFRAME是一个只可在IE3.0以上的浏览器中运行的HTML元素,在NetScape浏览器中运行时不会显示出任何效果。怎么,没意思?不!其实你完全没必要因为它不兼容NS就放弃使用这样一个精彩的标签,原因是时下大多数人使用的是IE,如果你是一个要求完美的人,好办:应用简单的浏览器识别脚本并分别设计不就行了吗?言归正传。

  IFRAME元素可以在页面中插入一个浮动的窗口,在这个浮动窗口中可以显示另外一个网页页面。它的基本语法格式如下:
  其中SRC是用来指定在页面浮动窗口中显示的网页文件的具体url地址;FRAMEBORDER用来指定页面浮动窗口是否具有边框,它的值只有1和0两个,分别表示有边框和没有边框;WIDTH和HEIGHT用来指定页面浮动窗口的宽度和高度;SCROLLING指定页面浮动窗口是否需要用滚动条,它的值有yes和no两个,当页面浮动窗口内嵌网页页面大于浮动窗口时,在默认的情况下,在浮动窗口的右边和下边会自动提供滚动条,但如果SCROLLING=″yes″,则不管在什么情况下,浮动窗口都会提供滚动条,如果SCROLLING=″no″,则不管在什么情况下,浮动窗口都不提供滚动条;ALIGN属性指定浮动窗口内的页面相对于浮动窗口的位置,它的值有left、right、top、middle、bottom,分别表示浮动窗口内的页面的位置是靠左、靠右、靠上、居中和靠下;MARGINWIDTH和MARGINHEIGHT分别用来指定浮动窗口内的页面与浮动窗口之间在水平方向和竖直方向上的填充距。

用脚本控制普通FRAME与浮动FRAME的方法基本相同,唯一的差别是浮动FRAME按<IFRAME>出现的顺序定义索引位置。如果FRAMEs.length不为0,就表示可以安全地处理浮动FRAME。比如说,在下面的代码中,如果存在叫做floater的浮动FRAME,链接就指向它;否则就指向"_top":

<IFRAME name="floater&q

用脚本控制普通FRAME与浮动FRAME的方法基本相同,唯一的差别是浮动FRAME按<IFRAME>出现的顺序定义索引位置。如果FRAMEs.length不为0,就表示可以安全地处理浮动FRAME。比如说,在下面的代码中,如果存在叫做floater的浮动FRAME,链接就指向它;否则就指向"_top":

<IFRAME name="floater" src="trog.htm" width=200 height=200></IFRAME>

<A href="grot.html" target="floater" onClick="if (!self.FRAMEs.length)
this.target=’_top’">See grot.htm</A>


  带有浮动FRAME的Web页面是FRAME文档的parent窗口,因此,多个浮动FRAME仍然可以通过parent.FRAME数组去访问每一个FRAME。

  预防脚本编程错误

  尽管FRAME是HTML的一个稳定规范说明,但DOM模型只把它们当做HTML元素而不是窗口,因此围绕FRAME的脚本编程并不是能很周全地定义。这个不足导致了当装载FRAME时会发生一些脚本执行方面的冲突。

  立即修改FRAME内容的脚本经常会产生错误。原因在于:浏览器通常是先执行脚本命令,然后在按照src所示装入页面内容。

  解决方法很直接,就是判断FRAME内容是否装载完毕。有一个好的处理技巧是以HTML页面开始所有的FRAME,由它象主FRAMESET报告装载请看。比如说,有一个FRAMESET页面,要等装载完所有的FRAME后才能执行函数goToIt(),那么就将下面的JavaScript程序段放进FRAMESET文档中:

countDown=FRAMEs.length;
function soundOff() {
countDown--;
if (countDown==0) {
goToIt();
}
}


  然后,在每个FRAME页面的<BODY>标记中设置上onLoad="parent.soundOff()"。当FRAME页面装载并执行soundOFF()后,等到countDown 为0时,就表示FRAME完全装载完毕。


可以用Iframe自适应高度来解决这个问题:

<div align="center">
<iframe id="frame_content" name="twt" src="homepage.html" width="1008" height="100%" marginwidth="0" marginheight="0" align="middle" scrolling="no" frameborder="0" οnlοad="this.height=100"></iframe>
<script type="text/javascript">

function reinitIframe(){

var iframe = document.getElementById("frame_content");

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

</script>
</div>


reference:
http://edu.136z.com/Web/22768.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值