iframe总结

yiyanwan77

浏览: 183314 次
性别:
来自: 威海

最近访客更多访客>>

magicdyq

xiaowenjie

carlisleshaw

everimbaq

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web技术

JavaScript HTML 浏览器 XHTML CSS

IFrame语法小全
IFrame语法小全
IFrame可以在网页内嵌入另一个页面，类似“画中画”形式。

标记的使用格式是:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："画中画"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;

FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

窗口与浮动帧之间的相互控制

在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

test.htm文件代码为:

<html>

<body>

<h1 id="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>

<h1 id="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标记。

例子：

1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓

应该怎么实现呢？

回答：

用下列代码替换网页的<title>..</title>

function scroll(n)

{temp=n;

Out1.scrollTop=Out1.scrollTop+temp;

if (temp==0) return;

setTimeout("scroll(temp)",80);

}

</SCRIPT>

<TR>

文字<BR> 文字<BR>

文字<BR>

文字

<BR>

</DIV>

</TD>

</TR>

<TR>

</TR>

</TABLE>

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

下面这段代码可以实现IFrame自适应高度，即随着页面的长度，自动适应以免除页面和IFrame同时出现滚动条。源代码如下

//** 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>

iframe 的用法与注意事项

好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态.

注意两个事项,ifr  是一个以存在的  iframe  的  ID  和  NAME  值:
        document.getElementById(“ifr”);
        window.frames[“ifr”];

要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对).第一种方法只是取出了一个OBJECT而已.

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

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

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

下面是示例,一个是aa.htm,一个是bb.htm,请先考到本地在运行,原因不用我在说了吧!

var aavalue="I'm a variant in Top window!";

var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];

alert("Alert  from  Top  window  :  Can't  get  iframe's  variant  by  ifr_id,  it  will  return  :"  +  ifr_id.bb_var);
alert("Alert  from  Top  window  :  Can't  get  iframe's  DOM  model  by  ifr_id  ,it  will  return  :"  +  ifr_id.window);
alert("Alert  from  Top  window  :  Get  src  from  id  :"  +  ifr_id.src);
alert("Alert  from  Top  window  :  Get  href  from  window:"  +  ifr_window.document.location.href);

//由于bb.htm可能还未装载完成,所以,下冇的可能引发错误
//调用iframe内的函数 ifr_window.bb();

//调用iframe内的变量
alert("Alert from Top window : " + ifr_window.bb_var);

//
alert("Alert from Top Window :" + ifr_window.document.body.innerHTML);

function aa(msg){
alert("I'm alerting from Top window ,and I received a msg:\n" + msg);
}
</script>

bb.htm

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html  xmlns="http://www.w3.org/1999/xhtml";  >
<head>
        <title>sub  frame</title>
<style  type="text/css">

</style>
</head>
<body>
        I'm  a  sub  frame!
        <br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...
</body>
</html>
<script  language="javascript"  type="text/javascript">

var bb_var="I'm a variable in ifr";

function bb(){
alert("Alert from iframe :I'm frame ifr's function")
}

//获取父页面的变量
alert("Alert from iframe parent.ifr_id::" + parent.ifr_id);
alert("Alert from iframe parent.aa_value : " + parent.aa_value);

//通过父页面的ifr_id来改变 iframe的高度
alert("Alert from iframe : ifr's clientHeight :" +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;

alert("Alert from iframe : ifr's scrollHeight : " + document.body.scrollHeight);

//调用父窗体的函数:
parent.aa("I will calling a function which is Top window's ");

//改变父窗体的标题:
alert("Alert from iframe : I will changing Top window's title");
top.document.title="The title value changed";

//通过父窗体的ifr_id来改变的border 与scrolling
alert("Alert from iframe : I will change my border and scrolling :");
top.ifr_id.border=0;
top.ifr_id.scrolling="no";
</script>

分享到：

iframe笔记 | 自定义标签

2009-01-12 11:23
浏览 1649
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

iframe总结

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

iframe总结

评论

发表评论

相关推荐

aop解决flex blazeds+jpa(hibernate)延迟加载抛出session关闭异常的问题

ANT

iframe多帧交互

自定义标签

写自定义标签时标记attribute里rtexprvalue的用法

JavaScript Core Index

Aptana使用入门一：Code Assist

32款实用源码编辑器一览

最近访客更多访客>>