iframe2016/4/12

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>