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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
vue实现节点增删改功能
Sep 26 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
jquery图片放大功能简单实现
2013/08/01 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python Django基础二之URL路由系统
2019/07/18 Python
python django model联合主键的例子
2019/08/06 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
wxPython实现整点报时
2019/11/18 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers