一、Iframe标记的使用

Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文档嵌入在一个HTML中显示。

它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件

相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,

成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,

一个形象的比喻即“画中画“电视。

现在我们谈一下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文件代码为:

hello,my boy

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

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

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

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

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

如example.htm:

hello,my wife

如果要在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中加入html,HTML中IFRAME标签的使用相关推荐

  1. iframe引用页面中的js操作父窗口标签

    假设有页面A,里面有iframe标签Frame,iframe引用页面B,在页面B中写js来操作页面A.方法如下: A.html <iframename="Frame"id=& ...

  2. html5 iframe隐藏滚动条,教你在iframe标签中制作滚动条样式

    首先让我们看看HTMLiframe标签中关于滚动条的去留和保存: iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边 ...

  3. html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法

    这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: b.html中有一个treeview,称为左菜单i ...

  4. iframe在ie和firefox中的高度兼容性问题解决

    iframe在ie和firefox中的高度兼容性问题解决 参考文章: (1)iframe在ie和firefox中的高度兼容性问题解决 (2)https://www.cnblogs.com/haore1 ...

  5. FineReport中如何用JavaScript自定义地图标签

    2019独角兽企业重金招聘Python工程师标准>>> 在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地 ...

  6. R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如、粗体、斜体等

    R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如.粗体.斜体等 目录

  7. R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体)

    R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体) 目录

  8. R语言可视化散点图(scatter plot)图、为图中的部分数据点添加标签、ggrepel包来帮忙

    R语言可视化散点图(scatter plot)图.为图中的部分数据点添加标签.ggrepel包来帮忙 目录

  9. Python计算训练数据集(测试集)中某个分类变量阴性(阳性)标签样本的不同水平(level)或者分类值的统计个数以及比例

    Python计算训练数据集(测试集)中某个分类变量阴性(阳性)标签样本的不同水平(level)或者分类值的统计个数以及比例 目录

最新文章

  1. 643 Maximum Average Subarray I
  2. AI 学习之路——轻松初探 Python 篇(一)
  3. 口令红包 java,[1.7.2]Gifts — 我的世界服务器在线礼物和登陆奖励插件
  4. python指定数据写入指定excel_python脚本——生成EXCEL,连接数据库,并将指定数据写入EXCEL...
  5. NSString 使用方法总结
  6. HashMap学习之transient
  7. Leetcode-105-从前序与中序遍历序列构造二叉树
  8. 处女座的训练(贪心)
  9. Excel: 批量去除空格的函数——trim函数, substitute函数,clean函数
  10. 意大利奢侈品牌-Kiton 华丽进驻北京新光天地-时尚生活-泛高尔夫网
  11. Pycharm Professional Edition 激活码(license),有效期至2018年01月30日
  12. C语言|博客作业05
  13. sqlserver dba
  14. android使用连连支付进行银行卡支付
  15. 【客服狂收offer秘籍】面试常见问题拆解
  16. 服务器部署基于chatgpt的服务
  17. 《交互设计的艺术-ios7拟物化到扁…
  18. emoji表情符号有时不能正常显示的问题的解决方案
  19. Hex文件转Bin文件
  20. 以PXE或UEFI PXE网络启动WinPE系统

热门文章

  1. css设置图片、边框、背景样式
  2. 富有创意的电子邮件签名设计(Email signature creative design template)
  3. 怎么控制latex插图的位置_[转载](转)LaTeX 控制图片的位置
  4. idea配置Camunda Modeler
  5. 贝叶斯公式的对数似然函数_最大似然法与似然函数
  6. 跳一跳python辅助软件思路及源码解析
  7. pytorch 指定卡1_如何为TensorFlow和PyTorch自动选择空闲GPU,解决抢卡争端
  8. Java8中字符串连接(join)收集器 Collectors.joining
  9. word2016设置整行背景颜色
  10. CREO5.0.6.0基本操作与导出常用图保姆级教程