纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？

　　答案很肯定：应用Iframe标记！

　　一、Iframe标记的使用

　　提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。

　　Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

　　现在我们谈一下Iframe标记的使用。

　　Iframe标记的使用格式是:

　　<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

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

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

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

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

　　比如:

　　<Iframe src="http://www.ninedns.com" width="250" height="200" scrolling="no" frameborder="0"></iframe>

　　二、父窗体与浮动帧之间的相互控制

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

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

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

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

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

　　<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>

　　test.htm文件代码为:

　　

  1. <html>
  2.  
  3. 　　　<body>
  4.  
  5. 　　　　<h1 id="myH1">hello,my boy</h1>
  6.  
  7. 　　　</body>
  8.  
  9. 　　</html>

　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:

　　document.myH1.innerText="hello,my dear"(其中，document可省)

　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

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

　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

　　如example.htm：

  1. 　　<html>
  2.  
  3. 　　　<body onclick="alert(tt.myH1.innerHTML)">
  4.  
  5. 　　　　<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
  6.  
  7. 　　　　<h1 id="myH2">hello,my wife</h1>
  8.  
  9. 　　　</body>
  10.  
  11. 　　</html>

　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：parent.myH2.innerText="hello,my friend"

　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

　　有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

牛气冲天的Iframe应用笔记的更多相关文章

  1. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  2. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  3. iframe整理学习笔记

    朋友问了一个比较怪的问题,iframe下自适应的问题,因为很少使用iframe的原因,怀着对iframe的疑惑采用了一点点实践;以下frame表示针对的iframe元素 解决的方法:对iframe进行 ...

  4. HMTL笔记——Iframe

    1.以iframe 引入的银行支付界面 不能够弹出插件,但是用户安装了插件才能够去支付. 2.以Iframe引入的页面在引入的界面中的跳转都只能在当前Iframe中完成,如果想要跳出则需要window ...

  5. C#学习笔记2：Iframe框架、MD5加密

    1.static void Main()的问题. static void Main(){……//代码}static void Main(string[] args){……//代码}两者的不同点?str ...

  6. HTML学习笔记 iframe引用页面按列(针对target打开方式解释) 第九节 （原创）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. iframe元素的学习(笔记)

    什么是iframe:iframe元素即内联框架,iframe是内联的并且承前启后,对于外围的页面,iframe是一个普通的元素,对于iframe里面的内容,又是一个五脏俱全的页面.重下面的写法可以看出 ...

  8. Django学习笔记6(iframe、外键插入)

    1.{%include 'index.html'%i} 平时很好用的iframe在django里面的不是很好用 django里面提供了{%include 'index.html'%i}的方式来取代了i ...

  9. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

随机推荐

  1. React Native踩坑之FlatList组件中的onEndReached

    最近在做一个RN项目,有使用到FlatList这样一个RN封装的组件去做上拉加载更多功能,在iOS和Android平台上,总结了以下几个遇到的问题及解决方案 1. 进入页面onReached开始就被触 ...

  2. maven的统一版本管理实践

    为什么要使用maven的统一版本管理? 在进行项目开发的时候,我们使用maven来做项目的构建和管理.为了方便项目中各个模块之间的复用,项目通常会有多个模块构成.不同的模块,会各自应用自己需要的jar ...

  3. Java—集合工具类

    集合中的元素工具类排序: Java提供了一个操作Set.List和Map等集合的工具类:Collections,该工具类提供了大量方法对集合进行排序.查询和修改等操作,还提供了将集合对象置为不可变.对 ...

  4. Eclipse插件安装出现Duplicate location错误

    一.原因 1.曾今安装过此插件 2.曾今安装此插件的时候出现错误 二.解决方法[eclipse] - Help - Install new software - Available Software ...

  5. Revit二次开发示例：CancelSave

    在Revit程序中注册文件操作事件,保存新建或打开文件的信息.当保存时,如果当前文件内容和之前的一致时,则弹出对话框提示并取消保存.对话框中有一个功能链接,点击可打开插件所在目录. #region N ...

  6. 安装部署VMware vSphere 5.5文档 (6-5) 安装配置vCenter

    部署VMware vSphere 5.5 实施文档 ########################################################################## ...

  7. leetcode 相交链表 python实现

    这道题 要想解决其实不难, 开两层循环进行遍历就能实现,但是会超时 如果想要O(n) 的时间复杂度, 我考虑用哈希表来存储遍历过的元素,如果发现当前遍历的元素在哈希表里,那说明交叉点就在这 这里利用了 ...

  8. JMS异步消息机制

    企业消息系统 Java Message Service 是由 Sun Microsystems 开发的,它为 Java 程序提供一种访问 企业消息系统 的方法.在讨论 JMS 之前,我们分来析一下企业 ...

  9. BZOJ 3238 [Ahoi2013]差异（后缀自动机）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3238 [题目大意] 给出一个串,设T[i]表示从第i位开始的后缀, 求sum(len( ...

  10. 20162327WJH2016-2017-2《程序设计与数据结构》课程总结

    20162327WJH2016-2017-2<程序设计与数据结构>课程总结 一.每周作业链接汇总 第一周作业:算法分析 第三周作业:查找与排序 第五周作业:有关栈的总结 第七周作业:树的有 ...