本文摘自：http://www.cnblogs.com/duankaige/archive/2012/09/20/2695012.html

 

iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法）

主页面调用iframe；

iframe页面调用主页面；

主页面的包含的iframe之间相互调用；

主要知识点

1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWindow得到iframe包含页面的window对象，然后就可以正常访问页面元素了；

2：$("#ii")[0].contentWindow  如果用jquery选择器获得iframe，需要加一个【0】；

3：$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;

4：$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通过这种方式向iframe页面传递参数，在iframe页面window.hellobaby就可以获取到值，hellobaby是自定义的变量；

5：在iframe页面通过parent可以获得主页面的window，接着就可以正常访问父亲页面的元素了；

6：parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用，需要先得到父亲的window，然后调用同级的iframe得到window进行操作；

源码

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>显示图表</title>

<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

	var gg="dsafdsafdsafdsafsdaf";

	function ggMM() {

		alert("2222222222222222222222222222222");

	}

	function callIframeMethod() {

		//document.getElementById("ii").contentWindow.test();

		$("#ii")[0].contentWindow.test(); //用jquery调用需要加一个[0]

	}

	function callIframeField() {

		alert($("#ii")[0].contentWindow.ff);

	}

	function callIframeHtml() {

		alert($("#ii")[0].contentWindow.$("#dd").val());

		//alert($("#ii")[0].contentWindow.document.getElementById("dd").value);

		//alert($("#ii")[0].contentWindow.document.getElementById("dd").value);

	}

	function giveParameter() {

		$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";

	}

</script>

</head>

<body>

	<a href="#" onClick="giveParameter();">参数传递</a>

	<a href="#" onClick="callIframeMethod();">调用子iframe方法</a>

	<a href="#" onClick="callIframeField();">调用子iframe变量</a>

	<a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>

	<iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe>

	<iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe>

</body>

</html>

frame.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>显示图表</title>

<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

var ff="adfdasfdsafdsafdsaf";

function test() {

	alert($("#dd").val());

}

function callMainField() {

	alert(parent.gg);

}

function callMainMethod() {

	parent.ggMM();

}

function callMainHtml() {

	alert(parent.$("#ii").attr("id"));

}

function getParameter() {

	alert(window.hellobaby);

}

</script>

</head>

<body>

	<a href="#" onClick="getParameter();">接受参数</a>

	<a href="#" onClick="callMainMethod();">调用子iframe方法</a>

	<a href="#" onClick="callMainField();">调用主窗口变量</a>

	<a href="#" onClick="callMainHtml();">调用子iframe组件</a>

	<input id="dd" type="text" value="1111111111"/>

</body>

</html>

兄弟iframe页面 newIframe.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>显示图表</title>

<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

function callLevelFrame() {

    var ff=parent.$("#ii")[0].contentWindow.ff;

    alert(ff);

}

</script>

</head>

<body>

    <a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>

    <input id="nn" type="text" value="sdafsdfsa"/>

</body>

</html>

ifram一些常用的知识点的更多相关文章

  1. JS中常用开发知识点

     JS中常用开发知识点 1.获取指定范围内的随机数 2.随机获取数组中的元素 3.生成从0到指定值的数字数组 等同于: 4.打乱数字数组的顺序 5.对象转换为数组 //注意对象必须是以下格式的才可以通 ...

  2. php 常用的知识点归集（下）

    24.静态属性与静态方法在类中的使用 需求:在玩CS的时候不停有伙伴加入,那么现在想知道共有多少人在玩,这个时候就可能用静态变量的方法来处理 利用原有的全局变量的方法来解决以上的问题 <?php ...

  3. Groovy常用编程知识点简明教程

    概述 Groovy 是一门基于JVM的动态类型语言,可以与 Java 平台几乎无缝融合(与Java代码一样编译成字节码). 使用 Groovy ,可以增强 Java 应用的灵活性和可扩展性,提升开发效 ...

  4. unity常用小知识点

    感觉自己抑郁变得更严重了,超级敏感,经常想崩溃大哭,睡眠超差,实在不想药物治疗,多看看书,多约约朋友,多出去走走. 来几句鸡汤吧,人一定要活得明白一点,任何关系都不要不清不楚,说不定最后受伤的就是自个 ...

  5. 常用ES6-ES10知识点总结

    在工作中我们会常用到的一些es6-es10的一些特性还记得多少,今天就让我们重新复习一遍 ES6语法 1.Let 1.let声明的变量具有块级作用域, { let a = 1 } console.lo ...

  6. iOS中多线程常用的知识点

        1.pThread 跨平台的多线程技术 , 是IEEE制定的POSIX 表示可移植性操作系统接口的多线程计数,UNIX内核平台 Unix,Linux,Mac(小红帽) (windows上有可移 ...

  7. rails 常用的知识点

    按惯例先上网址:  http://guides.ruby-china.org/    适合初学者很好的文章 ===========================知识点================ ...

  8. java常用基础知识点 （持续追加）

    作为一个Java编程人,会经常用上JDK中的大量的API类库,常用的有字符串操作.集合操作.文本操作.输入输出操作.以及网络操作, 常用的包: 1. java.lang Java程序的基础类,字符串, ...

  9. AngularJS应用，常用数组知识点

    AngularJS 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码“:true|false”, ...

随机推荐

  1. STL学习笔记序言

    笔者作为计算机科学与技术专业的学生,学习并使用C++已经有3年了.在接触STL之前的编程习惯是,所有程序的功能包括数据结构.算法等都是亲自实现,效率极其缓慢.后来从使用STL的vector开始慢慢的感 ...

  2. NSS_08 extjs表单验证

    Extjs做了非常好的表单验证功能, 使用起来非常方便. 系统内置了4种验证功能,分别是alpha, alphanumeric,url, email, 在程序中可以直接使用,(可以结合allowBla ...

  3. WCF 服务的ABC之契约（七）

    契约 Contract WCF的所有服务都会公开为契约(Contract),契约与平台无关,是描述服务功能的标注方式. 服务契约(Service Contract) 服务契约描述的是一个服务,它定义了 ...

  4. 【Qt】Qt国际化【转】

    简介 Qt国际化属于Qt高级中的一部分,本想着放到后面来说,上节刚好介绍了Qt Linguist,趁热打铁就一起了解下. 对于绝大多数的应用程序,在刚启动时,需要加载默认的语言(或最后一次设置的语言) ...

  5. JQ 选择器大全

    一.基本选择器 选择器 描 述 返回 示例 #id 根据给定id匹配一个元素 单个元素 $("#test") 选取id为test的元素 .class 根据给定类名匹配一个元素 集合 ...

  6. [大牛翻译系列]Hadoop（16）MapReduce 性能调优：优化数据序列化

    6.4.6 优化数据序列化 如何存储和传输数据对性能有很大的影响.在这部分将介绍数据序列化的最佳实践,从Hadoop中榨出最大的性能. 压缩压缩是Hadoop优化的重要部分.通过压缩可以减少作业输出数 ...

  7. Discuz 3.X 门户文章插入图片自动添加 alt 标签

    最近用 Discuz 搭建了个网站--儿童安全座椅网(www.bbseat.com.cn),用到了门户功能,不得不说Discuz 的功能还是非常强大的,但在使用过程中发现在发表文章时添加了图片却不能像 ...

  8. php中session_start()相关问题分析与解决办法

    介绍下,在php中使用session时遇到的一些问题,与相关解决方法.1.错误提示Warning: Cannot send session cookie - headers already sentW ...

  9. CSS练习

    看到一个CSS参考手册:http://css.doyoe.com/ 感谢感谢!

  10. Django Form的学习

    django.forms 是Django处理form的库      本质上可以直接通过对HttpRequest达到同样的效果,但是django.from带来更便捷的处理方式.功能有几点 通过form类 ...