日期:2014-05-18  浏览次数:20768 次

求一个ifram使用方法介绍的连接,谢谢
如题,谢谢

------解决方案--------------------
<iframe name= "alkj_music " frameBorder=0 src= "musicplayer/index.htm " scrolling= "no " style= "height: 22px; VISIBILITY: inherit; width: 100%; "> </iframe>
------解决方案--------------------
好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态.

注意两个事项,ifr 是一个以存在的 iframe 的 ID 和 NAME 值:
&#61548; document.getElementById(“ifr”);
&#61548; 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

运行代码框
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 />