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鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 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 win下Socket方式发邮件类
2009/08/21 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Django 开发环境配置过程详解
2019/07/18 Python
python django中8000端口被占用的解决
2019/12/17 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
介绍Ibatis的核心类
2013/11/18 面试题
struct和class的区别
2015/11/20 面试题
幼儿园区域活动总结
2014/05/08 职场文书
抵押贷款承诺书
2014/05/30 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
小学英语教学反思范文
2016/02/15 职场文书
python字符串常规操作大全
2021/05/02 Python
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js