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="width: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="width: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>
时间： 2024-10-27 07:51:44