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 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
javascript去除空格方法小结
May 21 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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
一个程序下载的管理程序(三)
2006/10/09 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
教大家制作简单的php日历
2015/11/17 PHP
php实现倒计时效果
2015/12/19 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python操作SQLite简明教程
2014/07/10 Python
深入学习Python中的装饰器使用
2016/06/20 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
自我鉴定范文300字
2013/10/01 职场文书
优秀应届生推荐信
2013/11/09 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
关于车尾的标语大全
2015/08/11 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python