多个iframe中根据src获取特定iframe并执行操作

前言:在项目中做一个批量编辑工单时需要在一大堆的iframe中的某一个iframe里边再用模态框的形式显示编辑区域,然后再在模态框里边加入iframe实现批量编辑的页面,最后在提交后无法实现跳转,就是当前模态框无法关闭,想到模态框的关闭是通过modal:hide关闭,就想在后端输出js代码直接通过click事件来关闭模态框


具体问题:

  • 在多个iframe中找到当前的iframe
  • 找到当前iframe之后操作iframe中的模态框关闭按钮,增加click事件

解决办法:

  • 通过iframe的src属性寻找iframe
  • 通过$("#frame_1").contents().find("#test"); 来找到iframe下页面中的模态框关闭按钮

通过iframe的src属性寻找iframe:

//js前端获取
var ucrIframe = window.top.$("iframe[src='/osp2016/agent/tickets.php']");

获取iframe页面中的元素并添加事件:

var ucrIframe = window.top.$("iframe[src='/osp2016/agent/tickets.php']");
//获取iframe元素 **.contents().find()
eg : curIframe.contents().find("#closeModal").click();

多个iframe中根据src获取特定iframe并执行操作的更多相关文章

  1. js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  2. jsp页面中某个src,如某个iframe的src,应该填写什么?可以是html、jsp、servlet、action吗?是如何加载的?

    jsp页面中某个src,如某个iframe的src,应该填写什么?可以是html.jsp.servlet.action吗?是如何加载的? 如有个test工程,其某个jsp中有个iframe,代码如下: ...

  3. 关于如何获取iframe中的元素

    今天研究了一下iframe中元素的获取,发现有些地方还是有点坑的. 首先:如果使用纯前端手段,是没有办法获取非同源的iframe中的元素的,后面会提到后端手段 一.同源环境 1.首先在父页面获取ifr ...

  4. 获取父窗口元素或者获取iframe中的元素(相同域名下)

    jquery方法 在父窗口中获取iframe中的元素 //方法1 $("#iframe的ID").contents().find("iframe中的元素"); ...

  5. 同一页面的两个Iframe,其中一个iframe获取另一个iframe内的iframe中的元素值

    公共父页面(主页面): <%@ page language="java" import="java.util.*" pageEncoding=" ...

  6. Jquery取得iframe中元素的几种方法

    [jquery]获取iframe中的body元素: $("iframe").contents().find("body").html(); [使用jquery操 ...

  7. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  8. 从后台读取项目文件在前端iframe中展示

    项目中有个需求是: 对于外部提供的前端项目,包含css.js.html.图片等的项目,将这个项目存进数据库,然后iframe中展示html,然后html中引用的js.css等文件 也能从数据库中读取并 ...

  9. 【HTML】Iframe中的onload事件

    当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index" ...

随机推荐

  1. Perl引用入门

    在perl中只有3种基本的数据结构:标量.数组.hash.变量可以是数值,可以是字符串. 这三种基本数据结构的数据存储方式如下: 但是,仅仅由这3种基本结构,就可以构造出更复杂的数据结构,例如hash ...

  2. Eureka 2.0 开源流产,真的对你影响很大吗?

    本文首发于 http://blog.didispace.com/Eureka-2-0-discontinued/ 最近连续发烧四天,偶尔刷两下朋友圈都能看到好几条来自不同号的关于<Eureka ...

  3. [心得]如何快速利用SqlMap做安全檢測

    SqlMap的介紹我就不詳提啦!SqlMap是用來尋找與做Sql-injection的一款工具 在使用前你需要安裝python唷!安裝的過程我們就不介紹了. 直接來看如何快速使用SqlMap吧! 這裡 ...

  4. MyBatis学习总结(一)——ORM概要与MyBatis快速起步

    程序员应该将核心关注点放在业务上,而不应该将时间过多的浪费在CRUD中,多数的ORM框架都把增加.修改与删除做得非常不错了,然后数据库中查询无疑是使用频次最高.复杂度大.与性能密切相关的操作,我们希望 ...

  5. ___树形菜单Ztree.js显示.

    ----视图@{ Layout = null;} <!DOCTYPE html><HTML><HEAD> <TITLE> ZTREE DEMO - be ...

  6. c# 画布验证码

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. Kafka安装与配置(windows)

    作者:灬花儿灬 出处:http://www.cnblogs.com/flower1990/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则 ...

  8. 黑客常用 Linux 入侵常用命令

    大学曾误入歧途算是一个脚本小子.... 系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cp ...

  9. 【Java每日一题】20170306

    20170303问题解析请点击今日问题下方的“[Java每日一题]20170306”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...

  10. hive drop 报错

    执行 drop database xxxx cascade; 删除数据库的时候报错. 报错信息:Execution Error, return code 1 from org.apache.hadoo ...