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 11 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python提取内容关键词的方法
2015/03/16 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
了解一下python内建模块collections
2020/09/07 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
餐饮周年庆活动方案
2014/08/14 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
解析目标检测之IoU
2021/06/26 Python
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js