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 FormatNumber函数实现方法
Dec 30 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 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
MYSQL环境变量设置方法
2007/01/15 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
微信小程序如何使用云开发
2019/05/17 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python简单日志处理类分享
2015/02/14 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python 简单的调用有道翻译
2020/11/25 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
转预备党员政审材料
2014/02/06 职场文书
党员十八大心得体会
2014/09/12 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
golang定时器
2022/04/14 Golang
Windows server 2012搭建FTP服务器
2022/04/29 Servers