iframe的使用

最新推荐文章于 2023-09-06 17:07:18 发布

EvaTian

最新推荐文章于 2023-09-06 17:07:18 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web page 文章标签： iframe attributes html border object 浏览器

本文链接：https://blog.youkuaiyun.com/EvaTian/article/details/4335178

web page 专栏收录该内容

1 篇文章

订阅专栏

一、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的属性的应用。