http://www.w3school.com.cn/tags/tag_iframe.asp
father.html
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function ff(msg) { alert(msg); } function test() { // 只能通过iframe名称获取子页面，不能通过id var div = window.frames["b"].document.getElementById("div"); alert(div); } function test2() { // 调用子页面方法 window.frames["b"].ff("hi san"); } </script> </head> <body> <span id="span">FFFFFFFFF</span> <iframe id="a" name="b" width="200px" height="200px" src="san.html"> <p>您的浏览器不支持 iframe 标签。</p> </iframe> <span>HHHHHHHH</span> <br> <a href="#" onclick="test()">点击获取子页面元素</a> <br> <a href="#" onclick="test2()">点击调用子页面方法</a> </body> </html>
san.html
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function test() { // 调用父页面方法 window.parent.ff("hello"); } function test2() { var span = window.parent.document.getElementById("span"); alert(span); } function ff(msg) { alert(msg); } </script> </head> <body> <div id="div" style=" 100px; height: 100px; background-color: yellow"></div> <a href="#" onclick="test()">点击调用父页面方法</a> <br> <a href="#" onclick="test2()">点击获取父页面元素</a> <br> </body> </html>
补充：
jQuery选择元素用：
jQuery(expression, [context])
返回值:jQuery
$("#someSelector",parent.document);
$("#someSelector",document.frames['someIframeName'].document);
效果图：
