IFrame标签

来源：互联网发布：免费英语网络公开课编辑：程序博客网时间：2024/06/05 16:48

IFrame的一些功能，查了一些资料，感觉比较零散，做一个整理，以备后用。

定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

属性

new : HTML5 中的新属性。

属性

值

描述

align

· left

· right

· top

· middle

· bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

frameborder

· 1

· 0

规定是否显示框架周围的边框。

height

· pixels

· %

规定 iframe 的高度。

longdesc

URL

规定一个页面，该页面包含了有关 iframe 的较长描述。

marginheight

pixels

定义 iframe 的顶部和底部的边距。

marginwidth

pixels

定义 iframe 的左侧和右侧的边距。

name

frame_name

规定 iframe 的名称。

sandbox

· ""

· allow-forms

· allow-same-origin

· allow-scripts

· allow-top-navigation

启用一系列对 <iframe> 中内容的额外限制。

scrolling

· yes

· no

· auto

规定是否在 iframe 中显示滚动条。

seamless

规定 <iframe> 看上去像是包含文档的一部分。

src

URL

规定在 iframe 中显示的文档的 URL。

srcdoc

HTML_code

规定在 <iframe> 中显示的页面的 HTML 内容。

width

· pixels

· %

定义 iframe 的宽度。

Frame 对象的属性

属性

描述

contentDocument

容纳框架的内容的文档。

frameBorder

设置或返回是否显示框架周围的边框。

设置或返回框架的 id。

longDesc

设置或返回指向包含框架内容描述文档的 URL。

marginHeight

设置或返回框架的顶部和底部页空白。

marginWidth

设置或返回框架的左边缘和右边缘的空白。

name

设置或返回框架的名称。

noResize

设置或返回框架是否可调整大小。

scrolling

设置或返回框架是否可拥有滚动条。

src

设置或返回应被加载到框架中的文档的 URL。

标准属性

属性

描述

className

设置或返回元素的 class 属性。

dir

设置或返回文本的方向。

lang

设置或返回元素的语言代码。

title

设置或返回元素的 title 属性。

属性

描述

contentDocument

容纳框架的内容的文档。

frameBorder

设置或返回是否显示框架周围的边框。

设置或返回框架的 id。

longDesc

设置或返回指向包含框架内容描述文档的 URL。

marginHeight

设置或返回框架的顶部和底部页空白。

marginWidth

设置或返回框架的左边缘和右边缘的空白。

name

设置或返回框架的名称。

noResize

设置或返回框架是否可调整大小。

scrolling

设置或返回框架是否可拥有滚动条。

src

设置或返回应被加载到框架中的文档的 URL。

标准属性

属性

描述

className

设置或返回元素的 class 属性。

dir

设置或返回文本的方向。

lang

设置或返回元素的语言代码。

title

设置或返回元素的 title 属性。

IFrame透明

<iframesrc="./test.html" allowtransparency="true"style="background-color=transparent" title="test"frameborder="0" width="470" height="308"scrolling="no"></iframe>

当然前提是iframe页面中没有设置颜色

注：iframe透明主要是使用了 allowtransparency="true"style="background-color=transparent"

iframe自适应高度

对于自适应高度的代码有很多，可效率什么的考虑进来好代码就不多见了，不过思路倒是差不多的

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种iframe动态调整高度的方法，主要是以下JS函数:

第一种方法：代码简单，兼容性还可以，大家可以先测试下:

functionSetWinHeight(obj) {
     var win=obj;
if (document.getElementById) {
    if (win && !window.opera) {
      if (win.contentDocument &&win.contentDocument.body.offsetHeight)
        win.height =win.contentDocument.body.offsetHeight;
      else if(win.Document &&win.Document.body.scrollHeight)
           win.height =win.Document.body.scrollHeight;
      }
    }
}

最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配

第二种方法：

<iframesrc="http://www.fufuok.com/" id="iframepage"name="iframepage" frameBorder=0 scrolling=no width="100%"onLoad="iFrameHeight()" ></iframe>

Javascript代码：
<script type="text/javascript" language="javascript">
function iFrameHeight() {
   var ifm= document.getElementById("iframepage");
   var subWeb = document.frames ?document.frames["iframepage"].document :          ifm.contentDocument;
   if(ifm != null && subWeb !=null) {
      ifm.height =subWeb.body.scrollHeight;
    }
}
</script>

IFrame父子页面相互调用js方法：

当父页面和子页面都属于同一个域下，那么它们之间js方法是可以相互调用的。在调用方法前指定function所属对象即可，父页面获取iframe所属对象方法为：iframe的name.window,iframe页面获取父页面的对象为parent的。具体例子如下：

父页面：parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>parent</title>

functionparentFunction() {

alert('functionin parent');

}

functioncallChild() {

child.window.childFunction();

child为iframe的name属性值，

不能为id，因为在FireFox下id不能获取iframe对象

}

</script>

</head>

<body>

</body>

</html>

子页面：child.html

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>child</title>

functionchildFunction() {

alert('functionin child');

}

functioncallParent() {

parent.parentFunction();

}

</script>

</head>

<body>

</body>

</html>

IFrame与父页面传指：

（1）父页面获取iframe中的元素值：

Js代码

1. //根据iframe的id获取对象

2. var i1 = window.frames['iframeId'];

3. //var iframe =window.frames[0];也可以

4. //获取iframe中的元素值

5. var val=i1.document.getElementById("t1").value

（2）在iframe中获取父页面中的元素值：

Js代码

1. var val = parent.document.getElementById("txt1");

（3）a包含2个iframe分别为b,c，现在从b中获取c中的元素的值：

Js代码

1. var i1 = parent.window.frames['iframeId'];

2. var val = i1.document.getElementById("text1").value;

注意下：上边的代码适用于ie。我在ie8下测试通过，Firefox3下运行不了（由于项目仅要求IE，不要求Firefox）。下边两句话引用网上其他朋友写的：
window.opener引用的是window.open打开的页面的父页面。
window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面。

0 0