有两个页面，父页面index.html， 子页面chilld.html 父页面index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button class="pToC">父页面调用子页面的方法</button> <div> 父页面 </div> <iframe src="child.html" id="child" width=500" height=""></iframe> </body> <script type="text/javascript"> function cChangeBg() { $('body').css('background', '#c3e6ce') } </script> </html>子页面chilld.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div>子页面</div> <button type="button" class="cToP">子页面调用父页面的方法</button> </body> <style> body{ background-color: #03B8CF; font-size: 30px; color: #fff; } </style> <script type="text/javascript"> function pChangeBg() { $('body').css('background', 'red') } </script> </html>1、父页面调用子页面中的方法
// 父页面调用子页面的方法pChangeBg $('.pToC').on('click', function() { let child = $('#child')[0].contentWindow // HTML 对象来返回 iframe，可以通过 DOM 方法来处理被返回的对象 child.pChangeBg() })2、子页面调用父页面中的方法
// 子页面调用父页面的方法cChangeBg $('.cToP').on('click', function() { parent.cChangeBg() })