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 相关文章推荐
基于jQuery的倒计时实现代码
May 30 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
JavaScript实现星级评价效果
May 17 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
咖啡的种类和口感
2021/03/03 新手入门
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP7 其他修改
2021/03/09 PHP
prototype1.4中文手册
2006/09/22 Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
Vue header组件开发详解
2018/01/26 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Python数据分析模块pandas用法详解
2019/09/04 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
一些Solaris面试题
2015/12/22 面试题
计算机求职信
2013/12/01 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
综治工作汇报材料
2014/10/27 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang