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温习篇 强大的JQuery选择器
Apr 24 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
iview form清除校验状态的实现
Sep 19 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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php实现图片添加水印功能
2014/02/13 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
angular forEach方法遍历源码解读
2017/01/25 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
合作投资意向书
2014/04/01 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
大学生操行评语大全
2014/12/31 职场文书
出生证明格式
2015/06/15 职场文书