多个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. WEB安全之垃圾信息防御措施

    防止垃圾评论与机器人的攻击手段如下: 1)IP限制.其原理在于IP难以伪造.即使是对于拨号用户,虽然IP可变,但这也会大大增加共攻击的工作量. 2)验证码.其重点是让验证码难于识别,对于“字母+数字” ...

  2. 翻译:SET子句(已提交到MariaDB官方手册)

    本文为mariadb官方手册:SET的译文. 原文:https://mariadb.com/kb/en/set/我提交到MariaDB官方手册的译文:https://mariadb.com/kb/zh ...

  3. Docker的基本操作与示例

    一.RunC RunC是一个由OCI(Open Container Initiative)制定的标准化轻量容器运行工具.OCI是专门致力于制定容器格式和运行时开放的工业化标准的组织.那容器标准化后Do ...

  4. 入侵感知系列之webshell检测思路

    Webshell检测   背景: 在B/S架构为主流的当下,web安全成了攻防领域的主战场,其中上传webshell是所有web黑客入侵后一定会做的事,所以检测网站中是否有webshell程序是判断被 ...

  5. 【worker】js中的多线程

    因为下个项目中要用到一些倒计时的功能,所以就提前准备了一下,省的到时候出现一下界面不友好和一些其他的事情.正好趁着这个机会也加深一下html5中的多线程worker的用法和理解. Worker简介 J ...

  6. [PHP]算法-跳台阶问题的PHP实现

    一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 思路: 1.找规律 f(1)=1 f(2)=2 f(3)=3 f(4)=5 f( ...

  7. [android] 采用post的方式提交数据

    GET:内部实现是组拼Url的方式,http协议规定最大长度4kb,ie浏览器限制1kb POST和GET的区别比较了一下,多了几条信息 Content-Type:application/x-www- ...

  8. 工作笔记-table问题汇总(vue单文件组件)

    1.vue: computed里定义的数据,在其他地方不能再重新赋值,会报错: Computed property "xxxxxx" was assigned to but it ...

  9. 微信小程序之封装http请求

    下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (url, metho ...

  10. Thinkphp5多数据库切换

    在项目开发中需要Thinkphp5读取多个数据库的数据,本文详细介绍Thinkphp5多数据库切换 一.在database.php配置默认数据库连接 'type'           => 'm ...