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

aa.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>Untitled Page</title>
<style type="text/css">
<!--
body{
margin:0px;
}
-->
</style>
</head>
<body>
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>
</body>
</html>
<script language="javascript" type="text/javascript">

var aa_value="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">
<!--
html,body{
margin:0px;
width:90%;
}
-->
</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详细用法

2011年03月23日 46KB 下载

IFrame用法

2007年05月12日 3KB 下载

iframe用法注意事项

2009年08月18日 35KB 下载

关于iframe用法

2010年07月04日 362KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭