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 getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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 删除cookie和浏览器重定向
2009/03/16 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
javascript抖动元素的小例子
2013/10/28 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
python写的ARP攻击代码实例
2014/06/04 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python之生产者消费者模型实现详解
2019/07/27 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Python 如何测试文件是否存在
2020/07/31 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
大学同学聚会邀请函
2014/01/29 职场文书
表演方阵解说词
2014/02/08 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
贷款担保申请书
2014/05/20 职场文书
土木工程求职信
2014/05/29 职场文书
镇创先争优活动总结
2014/08/28 职场文书
优秀教师推荐材料
2014/12/16 职场文书
资金申请报告范文
2015/05/14 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript