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玩转继承(一)
May 08 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
js和jquery中获取非行间样式
May 05 jQuery
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
详解Python字符串切片
2019/05/20 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
python文件路径操作方法总结
2020/12/21 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学校开学标语
2014/10/06 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
孝女彩金观后感
2015/06/10 职场文书
房贷收入证明范本
2015/06/12 职场文书
小学教师读书笔记
2015/07/01 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
MySQL数据库 安全管理
2022/05/06 MySQL