轉載於:https://blog.csdn.net/u013299635/article/details/78773207
效果圖:(注意url協議不能以 filter:/ 開頭)
1.父級html源碼:
main.html
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>main</title> <style type="text/css"> iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;} </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> 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"; } </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="frame" name="frame" src="frame.htm" frameborder="0"></iframe> <iframe id="newFrame" name="newFrame" src="newFrame.htm" frameborder="0"></iframe> </body> </html>
2.子頁面
frame.html
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>frame</title> <style type="text/css"> a{display: block;line-height:30px;} </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> 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) } </script> </head> <body> <h1>frame</h1> <a href="#" onClick="getParameter();">接受參數</a> <a href="#" onClick="callMainMethod();">調用父級方法,並且打印父級變量</a> <a href="#" onClick="callMainField();">調用主窗口變量</a> <a href="#" onClick="callMainHtml();">調用子iframe組件</a> <input id="dd" type="text" value="1111111111"/> </body> </html>
3.子頁面中嵌套的頁面
newFranme.html
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>在frame里嵌套frame</title> <style type="text/css"> 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; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> 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) }) </script> </head> <body> <h1>newFrame</h1> <a href="#" onClick="callLevelFrame();">調用兄弟iframe</a> <a href="#" onClick="callLevelFrame1();">調用自己的子頁面iframe1變量</a> <input id="nn" type="text" value="sdafsdfsa"/> <iframe id="newFrame1" name="newFrame1" src="newFrame1.htm" frameborder="0"></iframe> <iframe id="newFrame2" name="newFrame2" src="newFrame2.htm" frameborder="0"></iframe> </body> </html>
4.子頁面的子頁面中嵌套的頁面
newFram1.html
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>newFrame1</title> <style type="text/css"> a{display: block;line-height:30px;} </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> 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); } </script> </head> <body> <h1>newFrame1</h1> <a href="#" onClick="callnewFramFn();">調用newFram方法</a> <a href="#" onClick="callnewFramParam();">調用newFram變量</a> <input id="nn" type="text" value="這是newFrame1的input值"/> </body> </html>
5.子頁面的子頁面中嵌套的頁面
newFram2.html
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>newFrame1</title> <style type="text/css"> a{display: block;line-height:30px;} </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> var iframe1 = '我是iframe2的變量'; function callnewFramFn1() { parent.$("#newFrame1")[0].contentWindow.frame1(); console.log(parent.$('#newFrame1')); } </script> </head> <body> <h1>newFrame2</h1> <a href="#" onClick="callnewFramFn1();">調用newFram1方法</a> <input id="nn2" type="text" value="這是newFrame1的input值"/> </body> </html>