今天遇到一个问题:怎样实现点击一个按钮,在当前的页面上新增加一个小窗口,展示一个图片信息?

如图:

点击之前:

单击之后:

分析:要使新增的小窗口不影响父页面,我们这里采用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的操作相关推荐

  1. jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)

    第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

  2. jQuery中HTML的操作

    jQuery中HTML的操作 创建元素的方式 jQuery中创建元素的方式: 1.$("标签的代码") 2.对象.html("标签的代码"); var aObj ...

  3. jQuery 基础教程 (四)之jQuery中的DOM操作

    一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一 种与浏览器, 平台, 语言无关的接口, 使用该接口可以 轻松地访问页面中所有的标准组 ...

  4. 三、jQuery 中的 DOM 操作(超详细)

    文章目录 前言 一. DOM 介绍 二. 查找节点 2.1查找元素节点 2.2查找属性节点 三. 创建节点 3.1.创建元素节点 3.2.创建文本节点 3.3.创建属性节点 四.插入节点 4.1 DO ...

  5. JQuery中Ajax的操作

    转载自:http://blog.csdn.net/liujiahan629629/article/details/22229669 Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码 ...

  6. jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作

    jQuery中的 DOM 操作 查 查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...

  7. 第三章(jQuery中的DOM操作)

    3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...

  8. JQuery中的样式操作

    通过JavaScript获取dom元素上的style属性,我们可以动态的给元素赋予样式属性.在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了. .css() 方法: ...

  9. 关于Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

最新文章

  1. Mybatis 基本配置, 面向接口
  2. P5667 拉格朗日插值2(拉格朗日插值,NTT, 倒推求逆元)
  3. python购物车程序2019_Python实现购物车程序
  4. 设置按钮不可见_华为手机居然有【3种录屏方法】,很多人都不知道,真的太实用了...
  5. 盐城工学院计算机考研高吗,信息学院计算机班计玮考取中南大学研究生
  6. 幅度调制信号 matlab,《利用MATLAB实现信号的幅度调制与解调.doc
  7. TF之LiR:基于tensorflow实现手写数字图片识别准确率
  8. 实时数仓Hologres首次走进阿里淘特双11
  9. 基于XAMPP的Testlink安装方法
  10. 图像分类模型AlexNet解读
  11. 用友nccloud 虚拟机
  12. 超声波传感器闪光|乐高EV3教学
  13. 按键精灵手机助手之入门篇
  14. 前端框架(混合开发框架)
  15. MSP430学习总结——定时器
  16. Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline
  17. android+美拍加表情,美拍怎么添加表情文字在哪
  18. My_blog个人博客系统
  19. 科目三-上海松江小昆山
  20. java文件实现文件的上传和下载

热门文章

  1. php 内存池,内存详解: 详解PHP内存池中的存储层_php
  2. swagger文档配置
  3. Open XML之我见
  4. arp 原理及查杀方式
  5. 一层循环时间复杂度_数据结构与算法系列——时间、空间复杂度
  6. 2019-04-02
  7. 奥特曼在银行里下象棋的梗
  8. SQL那些事儿(三)----和小伙伴们做武大游
  9. Windows10部署Kubenetes详细步骤
  10. SpringBoot工程发布