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的开发之后,会自动的去访问生成图片的地址,这样图片的生成的需求就满足了。
转载于:https://www.cnblogs.com/wyxueyoubang/p/5412415.html
jQuery中iframe的操作相关推荐
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- jQuery中HTML的操作
jQuery中HTML的操作 创建元素的方式 jQuery中创建元素的方式: 1.$("标签的代码") 2.对象.html("标签的代码"); var aObj ...
- jQuery 基础教程 (四)之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一 种与浏览器, 平台, 语言无关的接口, 使用该接口可以 轻松地访问页面中所有的标准组 ...
- 三、jQuery 中的 DOM 操作(超详细)
文章目录 前言 一. DOM 介绍 二. 查找节点 2.1查找元素节点 2.2查找属性节点 三. 创建节点 3.1.创建元素节点 3.2.创建文本节点 3.3.创建属性节点 四.插入节点 4.1 DO ...
- JQuery中Ajax的操作
转载自:http://blog.csdn.net/liujiahan629629/article/details/22229669 Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码 ...
- jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
jQuery中的 DOM 操作 查 查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
- JQuery中的样式操作
通过JavaScript获取dom元素上的style属性,我们可以动态的给元素赋予样式属性.在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了. .css() 方法: ...
- 关于Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
最新文章
- Mybatis 基本配置, 面向接口
- P5667 拉格朗日插值2(拉格朗日插值,NTT, 倒推求逆元)
- python购物车程序2019_Python实现购物车程序
- 设置按钮不可见_华为手机居然有【3种录屏方法】,很多人都不知道,真的太实用了...
- 盐城工学院计算机考研高吗,信息学院计算机班计玮考取中南大学研究生
- 幅度调制信号 matlab,《利用MATLAB实现信号的幅度调制与解调.doc
- TF之LiR:基于tensorflow实现手写数字图片识别准确率
- 实时数仓Hologres首次走进阿里淘特双11
- 基于XAMPP的Testlink安装方法
- 图像分类模型AlexNet解读
- 用友nccloud 虚拟机
- 超声波传感器闪光|乐高EV3教学
- 按键精灵手机助手之入门篇
- 前端框架(混合开发框架)
- MSP430学习总结——定时器
- Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline
- android+美拍加表情,美拍怎么添加表情文字在哪
- My_blog个人博客系统
- 科目三-上海松江小昆山
- java文件实现文件的上传和下载