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 focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
理解jquery事件冒泡
Jan 03 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
用js实现放大镜效果
Oct 28 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 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
python opencv实现图像配准与比较
2021/02/09 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
小学教师事迹材料
2014/01/13 职场文书
丑小鸭教学反思
2014/02/03 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
低碳环保标语
2014/06/12 职场文书
四风问题查摆材料
2014/08/25 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
二十年同学聚会致辞
2015/07/28 职场文书