iframe父子兄弟之间调用传值(contentWindow && parent)

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)中含有两个iframe子页面(frame.html,newIframe.html)

  1. 主页面如何调用子页面中的方法;
  2. 子页面如何调用主页面中的方法;
  3. 两个子iframe之间如何如何进行交互

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>
时间: 2024-12-10 00:30:22

iframe父子兄弟之间调用传值(contentWindow && parent)的相关文章

JS iframe父子页面元素调用方法 window parent top 解释

父窗口调用子窗口 var hasMore = parent.document.getElementByIdx_x_x_x("hasMore").value;子窗口调用父窗口document.frames["ifrmBoxFrame"].me.preLoadBoxGrid(); window.frames["iframe_ID"].document.getElementByIdx_x_x_x("iframe_document_object

iframe 父子窗口相互之间调用语法

一.父窗口调用iframe子窗口方法 1.HTML语法:<iframe name="myFrame" src="child.html"></iframe> 2.父窗口调用子窗口:myFrame.window.functionName(); 3.子窗品调用父窗口:parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 parent.window.setWinHeight(parent.w

iframe父子页面之间相互调用元素和函数

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="Keywords" content=""> 6 <meta name="Description" con

vue 学习五 深入了解components(父子组件之间的传值)

上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 //父组件 <template> <div id="home"> <com test='12345' test2='1213232111111' @a_even="a_even"></com> //使用v-on监听子组件事件

iframe 父子兄弟 调用方法 赋值等

很久很久不用iframe了.最近做项目竟然全部用是iframe,各种不会各种查.. this.loadingProcess(data); 接口返回的data.父页面赋值各子页面 loadingProcess(data) { this.data = data; //循环各页面赋值 this.activitys.forEach(obj => { let activity = obj.statusCode; let obj1 = window.frames[activity + "IFRAME&

iframe 父子页面方法调用

在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.frameborder 设为1代表显示周围边框,设置为0不显示周围边框 2.height 设置iframe的高度 3.width 设置iframe的宽度 4.longdesc 属性值为URL 规定一个页面,该页面包含了有关 iframe 的较长描述 5.marginheight 定义 iframe 的顶部和底部的边距 6.

iframe父子级相互调用

父级:parent.html 调用孩子方法:fuji.window.functionName(); <!doctype html> <html> <head> <script type="text/javascript"> function say() { alert("parent.html------>I'm at parent.html"); } function callChild() { //docum

Vue之父子组件之间的传值

父组件,首先要挂载子组件 如果父组件传值给子组件,则 <transition mode="out-in"> <router-view  :applyList='applyList'  applyPath='flightBstrip'></router-view> </transition> 1.父组件挂载子组件的时候声明属性 applyList,applyPath.(applyList是变量,flightBstrip是字符串) 2.子组件

vue父子组件之间的传值

引入组件 父组件 <div> <form-edit></form-edit> </div> import FormEdit from "路径" //引入 export default { name: "HelloWorld", components:{ FormEdit }, data(){ return{ } } } 子组件 <template> <div>{{ change}}</di