iframe中加入html,HTML中IFRAME标签的使用
一、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标签的使用相关推荐
- iframe引用页面中的js操作父窗口标签
假设有页面A,里面有iframe标签Frame,iframe引用页面B,在页面B中写js来操作页面A.方法如下: A.html <iframename="Frame"id=& ...
- html5 iframe隐藏滚动条,教你在iframe标签中制作滚动条样式
首先让我们看看HTMLiframe标签中关于滚动条的去留和保存: iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边 ...
- html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法
这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: b.html中有一个treeview,称为左菜单i ...
- iframe在ie和firefox中的高度兼容性问题解决
iframe在ie和firefox中的高度兼容性问题解决 参考文章: (1)iframe在ie和firefox中的高度兼容性问题解决 (2)https://www.cnblogs.com/haore1 ...
- FineReport中如何用JavaScript自定义地图标签
2019独角兽企业重金招聘Python工程师标准>>> 在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地 ...
- R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如、粗体、斜体等
R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如.粗体.斜体等 目录
- R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体)
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体) 目录
- R语言可视化散点图(scatter plot)图、为图中的部分数据点添加标签、ggrepel包来帮忙
R语言可视化散点图(scatter plot)图.为图中的部分数据点添加标签.ggrepel包来帮忙 目录
- Python计算训练数据集(测试集)中某个分类变量阴性(阳性)标签样本的不同水平(level)或者分类值的统计个数以及比例
Python计算训练数据集(测试集)中某个分类变量阴性(阳性)标签样本的不同水平(level)或者分类值的统计个数以及比例 目录
最新文章
- 643 Maximum Average Subarray I
- AI 学习之路——轻松初探 Python 篇(一)
- 口令红包 java,[1.7.2]Gifts — 我的世界服务器在线礼物和登陆奖励插件
- python指定数据写入指定excel_python脚本——生成EXCEL,连接数据库,并将指定数据写入EXCEL...
- NSString 使用方法总结
- HashMap学习之transient
- Leetcode-105-从前序与中序遍历序列构造二叉树
- 处女座的训练(贪心)
- Excel: 批量去除空格的函数——trim函数, substitute函数,clean函数
- 意大利奢侈品牌-Kiton 华丽进驻北京新光天地-时尚生活-泛高尔夫网
- Pycharm Professional Edition 激活码(license),有效期至2018年01月30日
- C语言|博客作业05
- sqlserver dba
- android使用连连支付进行银行卡支付
- 【客服狂收offer秘籍】面试常见问题拆解
- 服务器部署基于chatgpt的服务
- 《交互设计的艺术-ios7拟物化到扁…
- emoji表情符号有时不能正常显示的问题的解决方案
- Hex文件转Bin文件
- 以PXE或UEFI PXE网络启动WinPE系统
热门文章
- css设置图片、边框、背景样式
- 富有创意的电子邮件签名设计(Email signature creative design template)
- 怎么控制latex插图的位置_[转载](转)LaTeX 控制图片的位置
- idea配置Camunda Modeler
- 贝叶斯公式的对数似然函数_最大似然法与似然函数
- 跳一跳python辅助软件思路及源码解析
- pytorch 指定卡1_如何为TensorFlow和PyTorch自动选择空闲GPU,解决抢卡争端
- Java8中字符串连接(join)收集器 Collectors.joining
- word2016设置整行背景颜色
- CREO5.0.6.0基本操作与导出常用图保姆级教程