jQuery中iframe的操作(点击按钮新增窗口)


Posted in Javascript onApril 20, 2016

<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。

今天遇到一个问题:怎样实现点击一个按钮,在当前的页面上新增加一个小窗口,展示一个图片信息?

如下图所示:

点击之前:

jQuery中iframe的操作(点击按钮新增窗口)

单击之后:

jQuery中iframe的操作(点击按钮新增窗口)

分析:要使新增的小窗口不影响父页面,我们这里采用iframe的框架的技术。

【<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。】

实现是思路:(1)在按钮的上添加一个点击的事件,在点击后加入一个iframe窗口,并将生成图片的地址加上去即可。

具体实现的代码:

(1)给按钮加上点击事件:

<input type="radio" name="dynamicType" id="dianji" style="padding: 0 10px 0 5px;margin-left:10px;margin-top: 13px;"/>
<p class="loadPhoto"></p>
$("#dianji").click(function(){
$("p.loadPhoto").empty(); // 清空原来的p标签的中内容

$("p.loadPhoto").html("<iframe width=520 height=400 name=\"touzizuhe\" id=\"touzizuhe\" frameborder=0 src="生成图片的地址"></iframe>");// 添加iframe的jquery的语句
});

注意:这里iframe的开发之后,会自动的去访问生成图片的地址,这样图片的生成的需求就满足了。

有关jQuery中iframe的操作(点击按钮新增窗口)就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 #Javascript
浅析JS动态创建元素【两种方法】
Apr 20 #Javascript
纯JS代码实现一键分享功能
Apr 20 #Javascript
JavaScript动态生成二维码图片
Apr 20 #Javascript
JS动态创建元素的两种方法
Apr 20 #Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 #Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 #Javascript
You might like
PHP完整的日历类(CLASS)
2006/11/27 PHP
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
党员培训思想汇报
2014/01/07 职场文书
给民警的表扬信
2014/01/08 职场文书
科技工作者先进事迹
2014/08/16 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
计划生育证明格式范本
2014/09/12 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
污染环境建议书
2015/09/14 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
教师培训学习心得体会
2016/01/21 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers