1. jquery 在iframe子页面获取父页面元素代码如下:

$("#objid", parent.document)

2. jquery在父页面 获取iframe子页面的元素

代码如下:

$("#objid",document.frames('iframename').document)

3.js 在iframe子页面获取父页面元素代码如下:

indow.parent.document.getElementByIdx_x("元素id");

4.js 在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");

5.子类iframe内调用父类函数：

window.parent.func();

用原生js在父页面获取iframe子页面的元素，以及在子页面获取父页面元素，这是平时经常会用到的方法，这里写一个例子来总结下：

1、父页面（demo.html），在父页面修改子页面div的背景色为灰色，原来为红色：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>demo主页面</title>
  6. <script type="text/javascript">
  7. window.onload = function(){
  8. var _iframe = document.getElementById('iframeId').contentWindow;
  9. var _div =_iframe.document.getElementById('objId');
  10. _div.style.backgroundColor = '#ccc';
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <div id='parDiv'>父页面</div>
  16. <iframe src="demo-iframe.html" id="iframeId" height="150" width="150"></iframe>
  17. </body>
  18. </html>

2、子页面（demo-iframe.html），在子页面修改父页面div的字体颜色为红色，原来为黑色：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>子页面demo13-iframe.html</title>
  6. <script type="text/javascript">
  7. window.onload = function(){
  8. var _iframe = window.parent;
  9. var _div =_iframe.document.getElementById('parDiv');
  10. _div.style.color = 'red';
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <div id='objId' style='width:100px;height:100px;background-color:red;'>子页面</div>
  16. </body>
  17. </html>

3、效果图：

（1）没有加入js时的效果图：

（2）加入js后的效果图：

jquery、js调用iframe父窗口与子窗口元素的方法整理的更多相关文章

  1. ifram父页面、子页面元素及方法的获取调用

    page1 父页面 <div id="ifram" class="parent1"> <iframe frameborder="0& ...

  2. iframe 父页面与子页面之间的方法的相互调用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. iframe 父页面与子页面之间的方法的相互调用【转】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. iframe父页面获取子页面元素方法

    1.window.frames["iframe的id"].contentDocument.getElementsByClassName("mycontainer" ...

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

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

  6. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  7. iframe中操作主体页面的元素，方法

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

  8. js window.open() 父窗口与子窗口的互相调用(未必有用)

    javascript 父窗口与子窗口的互相调用 <html> <head></head> <body> 主要实现父子关系的页面 window.opene ...

  9. #js window.open() 父窗口与子窗口的互相调用【转】

    未完整版 javascript 父窗口与子窗口的互相调用 a.html 父页面 <HTML> <HEAD> <meta http-equiv="content- ...

随机推荐

  1. 大数据 --> Spark和Hadoop作业之间的区别

    Spark和Hadoop作业之间的区别 熟悉Hadoop的人应该都知道,用户先编写好一个程序,我们称为Mapreduce程序,一个Mapreduce程序就是一个Job,而一个Job里面可以有一个或多个 ...

  2. centos安装postgis

      step 1   yum localinstall https://download.postgresql.org/pub/repos/yum/9.2/redhat/rhel-7-x86_64/p ...

  3. 强烈推荐！！！Fiddler抓取https设置详解（图文）

    很多实用fiddler抓包,对于http来说不需太多纠结,随便设置下就能用,但是抓取https就死活抓不了, 诸如以下问题: creation of the root certificate was ...

  4. 一个典型的kubernetes工作流程 - kubernetes

    1.准备好一个包含应用程序的Deployment的yml文件,然后通过kubectl客户端工具发送给ApiServer. 2.ApiServer接收到客户端的请求并将资源内容存储到数据库(etcd)中 ...

  5. 利用jmeter进行数据库测试

    1.首先,用jmeter进行数据库测试之前,要把oracle和mysql的JDBC驱动jar包放到jmeter安装路径的lib目录下,否则会提示错误 2.添加一个线程组,如下图 3.接下来添加一个JD ...

  6. 福州大学软工1715|W班-启航

    新的一学期即将开启,而在仅剩的几天的时间内,我将为接下来的软工实践助教事宜忙碌起来.要学习的东西很多,要关注的东西也很多. 虽然我现在还在茫然阶段,虽然我对<构建之法>还不太熟悉,但是,我 ...

  7. nyoj 苹果

    苹果 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 ctest有n个苹果,要将它放入容量为v的背包.给出第i个苹果的大小和价钱,求出能放入背包的苹果的总价钱最大值. ...

  8. Linux "零拷贝" sendfile函数中文说明及实际操作

    Sendfile函数说明 #include ssize_t sendfile(int out_fd, int in_fd, off_t *offset, size_t count); sendfile ...

  9. java希尔排序

    java希尔排序 1.基本思想: 希尔排序也成为"缩小增量排序",其基本原理是,现将待排序的数组元素分成多个子序列,使得每个子序列的元素个数相对较少,然后对各个子序列分别进行直接插 ...

  10. LeetCode & Q20-Valid Parentheses-Easy

    Stack String Description: Given a string containing just the characters '(', ')', '{', '}', '[' and ...