iframe的使用

 一、iframe是什么

我的理解iframe就是在html的页面里再嵌入一个html页面。

二、iframe页面代码:

<iframe id="ifr" name="ifr" src="cp/transparent.html"
     style="width:150px;height:100px;" allowtransparency="true" frameborder="0">
</iframe>

浏览器解析后的代码:

<iframe id="ifr" frameborder="0" allowtransparency="true" style="width: 150px; height: 100px;"

src="cp/transparent.html" name="ifr">
 <html>
  <head>
    <style type="text/css">

     html,body {
     background-color: transparent;
          }

    </style>
  </head>
  <body/>
 </html>
</iframe>

页面cp/transparent.html的代码:

<style type="text/css">
html,body {
    background-color: transparent;
    }
</style>

三、iframe的特点:

有两种方法得到iframe,但他们是完全不同的。

方法一:document.getElementById(“ifr”); //得到的是一个object


方法二:window.frames[“ifr”]; //得到的是一个完整的DOM模型

如果只想改变iframe的 src 或者 border , scrolling 等 attributes就需要用到第一种方法.(值得说明的是,
attributes与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等);

如果想取得iframe的页面(不是iframe本身)或者想改变property,就需要使用第二种方法,因为它取得的是一个完整
的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法.

四、简单举例

如果想用js将一些文字写入到iframe的页面里就需要写成这样:
window.frames['ifr'].document.getElementsByTagName('body')[0].innerHTML="Hello World!";

五、Note

注意的是,如果在iframe的页面未完全装入的时候,调用iframe的DOM模型,会发生很严重的错误,所以,你要准备一个
容错模式.

此外,可以登陆http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html 去了解更多关于iframe的属性的应用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值