html父子页面传值,iframe-父子-兄弟页面相互传值(jq和js两种方法)

效果图：(注意url协议不能以 filter:/  开头)

1.父级html源码：

main.html

main

iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;}

var gg="这是main.html变量";

function ggMM() {

console.log(gg);

}

function callIframeMethod() {

// js

document.getElementById("frame").contentWindow.test();

// jq

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

}

function callIframeField() {

// 以下两种方法可以达到同样的效果

console.log($("#frame")[0].contentWindow.ff);

console.log(frame.window.ff);

}

function callIframeHtml() {

// 以下两种方法可以达到同样的效果

console.log($("#frame")[0].contentWindow.$("#dd").val());

console.log(frame.window.$("#dd").val());

var t = document.getElementById('frame').contentWindow.document.getElementById('dd');

console.log(t);

// var t = document.getElementById('frame').contentWindow.document.getElementById('dd');

//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);

//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);

}

function giveParameter() {

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

}

参数传递

调用子iframe方法

调用子iframe变量

调用子iframe组件

2.子页面

frame.html

frame

a{display: block;line-height:30px;}

var ff="adfdasfdsafdsafdsaf";

function test() {

console.log($("#dd").val());

}

function callMainField() {

console.log(parent.gg);

}

function callMainMethod() {

parent.ggMM();

}

function callMainHtml() {

console.log(parent.$("#frame").attr("id"));

}

function getParameter() {

console.log(window.hellobaby);

}

function ss(){

console.log('这是frame方法');

console.log(ff)

}

frame

接受参数

调用父级方法，并且打印父级变量

调用主窗口变量

调用子iframe组件

3.子页面中嵌套的页面

newFranme.html

在frame里嵌套frame

input,a{display: block;line-height:30px;}

iframe{

float:left;

width:48%;height:250px;margin-top:40px;background:#abc;border:1px solid blue;

}

#newFrame2{ float:right; }

var newFrame = {

name:'这是newFrame的变量值',

};

function callLevelFrame() {

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

parent.$("#frame")[0].contentWindow.ss();

console.log('parent.$("#frame")[0].contentWindow.ff: '+ff);

}

function callLevelFrame1() {

console.log($("#newFrame1")[0].contentWindow.iframe1);

}

function frameFn(){

console.log('这是frame里面的方法franmeFn');

}

$(function(){

// setTimeout(function(){

// // console.log(parent.$("#frame"))

// // console.log(parent.$("#frame")[0].contentWindow.ss())

// // console.log(parent.document.getElementById('frame').contentWindow.ss());

// },500)

})

newFrame

调用兄弟iframe

调用自己的子页面iframe1变量

4.子页面的子页面中嵌套的页面

newFram1.html

newFrame1

a{display: block;line-height:30px;}

var iframe1 = '我是iframe1的变量';

function callnewFramFn() {

// js

parent.parent.document.getElementById('newFrame').contentWindow.frameFn();

// jq

parent.parent.$("#newFrame")[0].contentWindow.frameFn();

}

function callnewFramParam(){

console.log(parent.parent.document.getElementById('newFrame').contentWindow.newFrame);

}

// $(function(){

// setTimeout(function(){

// // console.log(parent.parent.$("#newFrame")[0])

// // console.log(parent.$("#newFrame")[0].contentWindow.ss())

// // console.log(parent.document.getElementById('newFrame').contentWindow.ss());

// },500)

// })

function frame1(){

console.log(iframe1);

parent.$("#newFrame2")[0].contentWindow.$('#nn2').val(iframe1);

}

newFrame1

调用newFram方法

调用newFram变量

5.子页面的子页面中嵌套的页面

newFram2.html

newFrame1

a{display: block;line-height:30px;}

var iframe1 = '我是iframe2的变量';

function callnewFramFn1() {

parent.$("#newFrame1")[0].contentWindow.frame1();

console.log(parent.$('#newFrame1'));

}

newFrame2

调用newFram1方法