html的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,请先考到本地在运行,原因不用我在说了吧!本文来自http://bianceng.cn(编程入门)

  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: " + 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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML `<iframe>` 元素用于在网页嵌入另一个HTML文档,通常称为"内联框架"或"嵌入式框架"。它的主要作用是创建一个独立的浏览器窗口或区域,显示其他网站的内容,或者在一个页面显示同一个网站的不同部分。使用`<iframe>`的基本语法如下: ```html <iframe src="URL_of_the_document_to_embed" // 要嵌入的文档的URL width="frame_width" // 框架的宽度(可选,单位px或%) height="frame_height" // 框架的高度(可选,单位px或auto) frameborder="0" // 是否显示边框,通常设为0去除边框 scrolling="yes|no|auto" // 是否滚动条可见,yes表示有滚动条,no表示没有 name="frame_name" // 可选,给框架命名,可用于JavaScript sandbox="…" // 安全属性,限制嵌入内容的交互性 > </iframe> ``` - `src`: 必须属性,定义要嵌入的文档地址。 - `width` 和 `height`: 可选属性,设置框架的实际大小。如果高度设为`auto`,内容区域会自动调整到适应内容。 - `frameborder`: 通常设为0,以获得更简洁的外观。 - `scrolling`: 控制是否显示滚动条,`auto`表示根据内容决定是否需要。 - `name`: 可选属性,方便引用和管理嵌套的iframe。 - `sandbox`: 可选属性,用于限制跨域iframe的安全特性。 使用`<iframe>`时需要注意几点: 1. 由于同源策略,`<iframe>`的内容只能加载来自相同域名或经过CORS允许的跨域资源。 2. 如果嵌入的文档比包含它的文档大,可能会导致性能问题,因为浏览器需要处理额外的渲染和通信开销。 3. 当多个`<iframe>`嵌套时,可能会出现重叠或样式冲突,需要谨慎调整布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值