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的操作的更多相关文章
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- jquery中链式操作的this指向
jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...
- jQuery中的模拟操作
jQuery中的模拟操作主要是通过trigger来触发,相当于页面加载完成后不需要用户点击按钮,就可以自动触发页面中的相关事件. trigger(type,[data])可以用来模拟触发自定义事件的触 ...
- Jquery:Jquery中的DOM操作<二>
由于昨天晚上回来的晚,写的有点匆忙,所以昨天的学习笔记中出现了多处错误的地方,幸好有各位园友帮忙指出,在这里谢过各位了!今天继续学习关于Jquery中DOM的操作,其实是昨天随笔的延续,求围观!!! ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
随机推荐
- 使用Git Bash远程添加分支和简单部署你的静态页面
新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...
- CentOS 7 修改主机名
今天在阿里云上买了一个centos7的服务器,连接上以后,发现一个很长很长的主机名,看着让人很是不爽,就想着怎样将其改成一个有个性的名字. 这里我想说的是,在centos7 版本的linux系统上和c ...
- [每日Linux]Linux下xsell和xftp的使用
实验缘由: 1.xsell在Linux下的作用就是远程登录的一个界面,也就是实现访问在Windows下访问Linux服务器的功能.之前在数据挖掘实验中因为自己电脑的内存不够,曾经使用过实验室的服务器跑 ...
- 支付宝AR抢红包?前端轻松就破解~
近期阿里搞了各LBS+AR实景的红包玩法,小伙伴们在公司里都玩疯了~ 有时候为了抢一个红包,会跑到另一个地方去拍照,虽然略麻烦,但整体的互动还是很有意思的. 不过对于机智的前端童鞋来说,只需要简单的一 ...
- MyBatis3:SQL映射
前言 前面学习了config.xml,下面就要进入MyBatis的核心SQL映射了,第一篇文章的时候,student.xml里面是这么写的: <?xml version="1.0&qu ...
- LeetCode-2AddTwoNumbers(C#)
# 题目 2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The di ...
- Entity Framework 6 Recipes 2nd Edition(11-9)译 -> 在LINQ中使用规范函数
11-9. 在LINQ中使用规范函数 问题 想在一个LINQ查询中使用规范函数 解决方案 假设我们已经有一个影片租赁(MovieRental )实体,它保存某个影片什么时候租出及还回来,以及滞纳金等, ...
- MongoDB学习笔记~数据模型属性为集合时应该为它初始化
回到目录 今天要说一下技术点,我们在设计mongodb的数据模型时,如果属性是数组或者集合类型,我们在模型初始化时,需要为它们初始化一下,否则在数据库里将会被存储为NULL,当被存储为NULL时,我们 ...
- WCF学习之旅—WCF服务的WAS寄宿(十二)
上接 WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) 八.WAS宿主 IIS ...
- 【WPF】运用MEF实现窗口的动态扩展
若干年前,老周写了几篇有关MEF的烂文,简单地说,MEF是一种动态扩展技术,比如可以指定以某个程序集或某个目录为搜索范围,应用程序在运行时会自动搜索符合条件的类型,并自动完成导入,这样做的好处是,主程 ...