js操作iframe
contentWindow
在服务器环境下测试
contentDocument
二种方法的区别
子级iframe修改父级元素内容
window.parent
window.top与window.parent的区别
window.top:是当前文件最顶端的那个文件，window.parent:是当前文件上面的文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div style="200px; height:200px; background:red;"></div> </body> </html>
上面是iframe4
下面是iframe5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div style="200px; height:400px; background:green;"></div> </body> </html>
父文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); var oIframe = document.getElementById('iframe1'); function changeHeight(){ setTimeout(function(){ oIframe.height = oIframe.contentWindow.document.body.offsetHeight; },100);//防止转向文件与changeHeight函数同时运行 } changeHeight(); aInput[0].onclick = function(){ oIframe.src = 'iframe4.html'; changeHeight(); }; aInput[1].onclick = function(){ oIframe.src = 'iframe5.html'; changeHeight(); }; }; </script> </head> <body> <input type="button" value="切换1" /> <input type="button" value="切换2" /> <iframe id="iframe1" src="iframe4.html" scrolling="no"></iframe> </body> </html>