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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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与浏览器缓存的分析
2013/06/03 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python非递归全排列实现方法
2017/04/10 Python
python学习必备知识汇总
2017/09/08 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python中安装django模块的方法
2020/03/12 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
python如何实现递归转非递归
2021/02/25 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
优秀大学生的自我评价
2014/01/16 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
如何用PHP实现多线程编程
2021/05/26 PHP