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 prototype对象的属性说明
Mar 13 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
Yii2中datetime类的使用
2016/12/17 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
django模板结构优化的方法
2019/02/28 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
护理专业本科生自荐信
2013/10/01 职场文书
社会学专业求职信
2014/02/24 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
Oracle中日期的使用方法实例
2022/07/07 Oracle