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 27 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
用js实现in_array的方法
Nov 05 Javascript
javascript 闭包详解
Jul 02 Javascript
js格式化时间的简单实例
Nov 27 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
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
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python+django快速实现文件上传
2016/10/24 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python中import与from方法总结(推荐)
2019/03/21 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技