原文地址:https://www.cnblogs.com/BlingSun/p/7484237.html

jQuery、js调用iframe父窗口与子窗口元素的方法(亲测有效)

子页面获取父页面的id=care的子页面
parent.care.location.reload();
父页面获取id=imp的子页面
imp.location.reload();
1. jquery在iframe子页面获取父页面元素和方法代码如下:
parent.$("selector");
parent.method();
 
2. jquery在父页面获取iframe子页面的元素和方法
代码如下:
iframe.$("select");
iframe.method();
 
3.js在iframe子页面获取父页面元素代码如下:
window.parent.document.getElementById("元素id");
 
4.js在父页面获取iframe子页面元素代码如下:
window.frames["iframe_ID"].document.getElementById("元素id");
 
方法调用
父页面调用子页面方法:FrameName.window.childMethod();
子页面调用父页面方法:parent.window.parentMethod();
 
DOM元素访问
获取到页面的window.document对象后,即可访问DOM元素

iframe获取父、子窗口的元素和方法的更多相关文章

  1. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  2. 获取父页面的dom元素

    $("li.jericho_tabs", window.top.document); 上面的代码意思是获取父页面的li元素,class为jericho_tabs的所有元素.

  3. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  4. iframe获取父、子窗口的方法

    jquery.js调用iframe父窗口与子窗口元素的方法 1. jquery在iframe子页面获取父页面元素代码如下: $("#objid",parent.document) ...

  5. iframe中 父页面和子页面查找元素的方法

    从父页面中查找iframe子页面中对象的方法:JS: document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象 ...

  6. iframe中操作主体页面的元素,方法

    在不使用三大框架的情况下,iframe的使用可以做到在页面中直接引入别的页面作为当前页面的一部分,但是在iframe的使用过程中存在一些相互之间的操作 例如在iframe中获取主页面的元素,使用主页面 ...

  7. jQuery获取父级、兄弟节点的方法

    一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...

  8. JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    1)在iframe中查找父页面元素的方法:$('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量:parent.methodparent.v ...

  9. 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项

    一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...

随机推荐

  1. ASOC 音频子系统框架

    基于: Mini2440 开发板, Linux 3.4.2 内核 ASOC 简介: ASoC - ALSA System on Chip,是建立在标准ALSA驱动层上,为了更好地支持嵌入式处理器和移动 ...

  2. [转]angular2在运行ng serve的时候卡在95% emitting LicenseWebpackPlugin

    本文转自:https://blog.csdn.net/qq919694688/article/details/80912207 放弃使用cnpm,使用yarn 1.删除node_modules (不需 ...

  3. webstrom vue项目让局域网访问

    vue项目package.json "dev": "webpack-dev-server --inline --progress --config build/webpa ...

  4. Android ThreadPoolExecutor线程池

    引言 Android的线程池概念来自于Java的Executor,真正的线程池实现为ThreadPoolExecutor.在Android中,提供了4类不同的线程池,具体下面会说到.为什么使用线程池呢 ...

  5. LVS+keepalived 实战

    安装依赖: yum -y install wget libnl* popt* gcc.x86_64 gcc-c++.x86_64 gcc-objc++.x86_64 kernel-devel.x86_ ...

  6. Vue性能优化

    今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人 ...

  7. React自己写的一个地图小组件

    由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只 ...

  8. php获取数据库中数据

    <?php header("Content-type:text/html;charset=utf-8");//字符编码设置 $servername = "local ...

  9. React Render Props 模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...

  10. 如今领占主导地位的19种AI技术!

    如今领占主导地位的19种AI技术! http://blog.itpub.net/31542119/viewspace-2212797/ 深度学习的突破将人工智能带进全新阶段. 2006 年-2015 ...