iframe属性与用法
iframe标签
小明说,iframe是能耗最高的一个元素,尽量减少使用。
小蓝说,iframe的安全性太差,尽量减少使用。
虽然他们说的是真的,但是iframe的强大功能是不容忽视的,而且现在不乏公司正在使用它。
标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
所有的主流浏览器都支持标签。你可以把提示的文字放到 和 里面,这样不支持 的浏览器就会出现提示的文字。。
1、定义和用法
name 属性规定 iframe 的名称。
name 元素的 name 属性用于在 JavaScript 中引用元素,或者作为 a 或 form 元素的 target 属性的值,或者作为 input 或 button 的 formtarget 属性的值。
2、HTML 4.01 与 HTML5之间的差异
无。
2、1HTML 4.01 与 XHTML 之间的差异
在 XHTML 中,name 属性以废弃,并将被移除。请使用 id 属性代替。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。
3、浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持 name 属性。
4、iframe 的常用属性:
name : 规定 的名称。
width: 规定 的宽度。
height :规定 的高度。
src :规定在 中显示的文档的 URL。
frameborder : 规定是否显示 周围的边框。 (0为无边框,1位有边框)。
align : 规定如何根据周围的元素来对齐 。 (left,right,top,middle,bottom)。
scrolling : 规定是否在 中显示滚动条。 (yes,no,auto)
具体详情请参考W3school:https://www.w3school.com.cn/tags/tag_iframe.asp
5、iframe案例 代码片
.
// iframe自定义属性
<div class="page-content" style="width: 100%;"><iframe src="main.html" width="100%" height="1020px" frameborder="0" scrolling="yes" name="mainFrame" seamless="1" id="external-frame" onload="setIframeHeight(this)"></iframe>
</div>
6、那如何获取iframe里面的内容呢?
// 获取iframe内容
var iframe = document.getElementById("myrame"); //获取iframe标签
var iwindow = iframe.contentWindow; //获取iframe的window对象
var idoc = iwindow.document; //获取iframe的document对象
console.log(idoc.documentElement); //获取iframe的html
console.log("body",idoc.body);
点击跳转iframe标签页面
a标签里必须有href、target俩个属性;href属性写跳转页面或者路径即可,target属性必须写为iframe标签里的name属性里的属性值。当点击这个路径即可跳转到自定义页面 代码片
.
// 配合iframe跳转的必要自定义属性
<a href="main.html" target="mainFrame"><i class="icon-home"></i>跳转Iframe页面
</a>
1、iframe 透明
在transparentBody.htm文件的标签中,我已经加入了style=“background-color=transparent” 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:
2、iframe 的优缺点
优点:
重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);
技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;
方便开发,减少代码的重复率(比如页面的header,footer);
缺点:
会产生很多的页面,不易于管理;
不易打印;
多框架的页面会增加服务气得http请求;
浏览器的后退按钮无效等;
iframe属性与用法相关推荐
- iframe属性 及用法
1.frameborder 值为 1或0 规定是否显示框架周围的边框 1是显示 0不显示 2.height 值为 px或% 设置iframe的高度 3.marginheight 值为 ...
- 获得html页面的iframe,iframe属性值获取
js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他的iframe的id 在父页面中定义函数,再到子页面中调用. 父页面parent.html function ge ...
- html中iframe标签的用法详解
<iframe>是什么?html中iframe标签的用法详解 原创 2018-10-26 10:24:35 03690 经常进行页面布局的人对于HTML中的iframe标签一定不 ...
- iframe是什么?html中iframe标签的用法详解
经常进行页面布局的人对于HTML中的iframe标签一定不陌生,iframe标签是一个内联框架,说白了就是用来在当前 HTML 页面中嵌入另一个文档的.刚刚接触前端的小伙伴可能不知道html中ifra ...
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
- 教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
- is属性用法 vue_vue组件讲解(is属性的用法)模板标签替换操作
vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样 这样会保证dom结构在浏览器的正常渲染,尽量避免在不正 ...
- python控制画笔尺寸,Python画笔的属性及用法详解
画笔有颜色.画线的宽度等属性. 1.turtle.pensize():设置画笔的宽度: 2.turtle.pencolor():没有参数传入返回当前画笔颜色:传入参数设置画笔颜色,可以是字符串如&qu ...
- AndroidManifest.xml中Activity ConfigChanges属性的用法
通过设置这个属性可以使Activity捕捉设备状态变化,以下是可以被识别的内容: CONFIG_FONT_SCALE CONFIG_MCC CONFIG_MNC CONFIG_LOCALE CONFI ...
最新文章
- L2-005. 集合相似度
- Transformation HDU - 6726(百度之星复赛2019 dfs)
- XP调整禁用页面文件
- Spring :读取配置文件(.properties、.yam)相关注解
- 使用echarts(四)定时刷新图表
- 网路收报流程-网桥的处理流程(br网桥)(四)
- paip.c++ gcc 不能捕获exception异常的解决
- 如何在Java中执行Python模块?从认识JEP库开始
- Vivado2018.1安装教程
- OpenCV3.1安装包下载
- sqlserver 修改表字段长度(好记性不如烂笔头)
- SQL Server数据误删恢复
- VS2010出现重复的代码项原因及解决方式
- 【CTO讲堂】企业该如何打造自身的“安全免疫系统”?
- Shader入门精要-4-高级篇
- 勒索病毒场景模拟及原理
- 实习的“黄金圈法则”,你了解多少?
- php用户个人空间,毕业论文:多用户个人空间平台的设计和实现
- 君子务本,本立而道生;敬事而信,直道而事人
- python显示日历_Python获取时间范围内日期列表和周列表的函数