iframe标签使用技术详解 iframe标签怎么用
yuyutoo 2024-10-24 17:47 7 浏览 0 评论
iframe标签相比大家知道这个标签,但是用的人也算比较少,毕竟性能问题,iframe标签是html标签的一种是文档里面包含着另外一个文档。因为在管理后台(dedecms,thinkcmf,layui)等上面大量有运用到iframe技术,所以值得拿出来深入的研究下。
iframe标签基础:
iframe代码判断示例:
<iframe src="http://www.baidu.com"></iframe>
可以看的出代码结构是非常简单的,iframe里的width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder 边框大小;frameborder 属性规定是否显示 iframe 周围的边框;align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。srcdoc 属性规定页面的 HTML 内容显示在行内框架中。allowfullscreen值是true和false,是否允许iframe全屏,默认为false。allowtransparencytrue or false是否允许iframe设置为透明,默认为false。
iframe结合JavaScript操作
我们通常把iframe理解为盒子,而这个盒子跟传统的div盒子不一样,里面的内容是由window对象,父级window对象,顶级window对象三个来控制,就是说我们自定义的css标签对于iframe的页面是没有任何影响的。用iframe.contentWindow, 获取iframe的window对象来改变iframe对应的状态。
iframe的安全性问题:
毕竟iframe是可以嵌套来嵌套去,所以你的页面也有可能被一些不法的网站给嵌套过去。那么我们就要懂点防嵌套技术。
用JavaScript判断是否是本域操作,如果不是的话,禁止行为并且提示。代码如下:
if(window != window.top){ window.top.location.href = correctURL;
}
如果大家有更多的iframe操作的话,欢迎留言区互相的探讨谢谢。
相关推荐
- 网站建设:从新手到高手
-
现代化网站应用领域非常广泛,从个人形象网站展示、企业商业网站运作、到政府公益等服务网站,各行各业都需要网站建设。大体上可以归结四类:宣传型网站设计、产品型网站制作、电子商务型网站建设、定制型功能网站开...
- JetBrains 推出全新 AI 编程工具 Junie,助力高效开发
-
JetBrains宣布推出名为Junie的全新AI编程工具。这款工具不仅能执行简单的代码生成与检查任务,还能应对编写测试、验证结果等复杂项目,为开发者提供全方位支持。根据SWEBench...
- AI也能写代码!代码生成、代码补全、注释生成、代码翻译轻松搞定
-
清华GLM技术团队打造的多语言代码生成模型CodeGeeX近期更新了新的开源版本「CodeGeeX2-6B」。CodeGeeX2是多语言代码生成模型CodeGeeX的第二代模型,不同于一代CodeG...
- 一键生成前后端代码,一个36k星的企业级低代码平台
-
「企业级低代码平台」前后端分离架构SpringBoot2.x,SpringCloud,AntDesign&Vue,Mybatis,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任...
- Gitee 代码托管实战指南:5 步完成本地项目云端同步(附避坑要点)
-
核心流程拆解:远程仓库的搭建登录Gitee官网(注册账号比较简单,大家自行操作),点击“新建仓库”,建议勾选“初始化仓库”和“设置模板文件”(如.gitignore),避免上传临时文件。...
- jeecg-boot 源码项目-强烈推荐使用
-
JEECGBOOT低代码开发平台...
- JetBrains推出全新AI编程工具Junie,强调以开发者为中心
-
IT之家2月1日消息,JetBrains发文,宣布推出一款名为Junie的全新AI编程工具,官方声称这款AI工具既能执行简单的代码生成与检查等基础任务,也能应对“编写测试、验证结...
- JetBrains旗下WebStorm和Rider现已加入“非商用免费”阵营
-
IT之家10月25日消息,软件开发商JetBrains今日宣布,旗下WebStorm(JavaScript开发工具)和Rider(.NET开发工具)现已加入“非商用免费”阵营。如果...
- 谈谈websocket跨域
-
了解websocketwebsocket是HTML5的新特性,在客户端和服务端提供了一个基于TCP连接的双向通道。...
- websocket调试工具
-
...
- 利用webSocket实现消息的实时推送
-
1.什么是webSocketwebSocket实现实现推送消息WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。以前的推送技术使用Ajax轮询,浏览器需...
- 为 Go 开发的 WebSocket 库
-
#记录我的2024#...
- 「Java基础」Springboot+Websocket的实现后端数据实时推送
-
这篇文章主要就是实现这个功能,只演示一个基本的案例。使用的是websocket技术。...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)