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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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防CC攻击实现代码
2011/12/29 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php命令行模式代码实例详解
2021/02/26 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JS模板实现方法
2013/04/03 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Three.js基础学习教程
2017/11/16 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python实现的建造者模式示例
2018/08/06 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
为什么要用EJB
2014/04/17 面试题
教育实习生的自我评价分享
2013/11/21 职场文书
社区健康教育工作方案
2014/06/03 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
文艺晚会开场白
2015/05/29 职场文书