iframe
能够做的事变:
完成跨域
处理IE6下
select
遮挡不住的题目处理
ajax
的行进退却题目完成异步上传
iframe
基本知识
iframe
元素会建立包括别的一个文档的内联框架
操纵iframe
1)隐蔽iframe
表框
设置frameborder
为0;
<iframe frameborder="0" width="400" height="400" src="#" scrolling="no">
</iframe>
<body>
<iframe frameborder="1" width="400" height="400" src="#" scrolling="no" id="myiframe">
</iframe>
<script>
var myiframe = document.getElementById("myiframe");
myiframe.style.border = "none"; // FF下有用,IE下无效
myiframe.setAttribute("frameborder",0);//FF下有用,IE下无效
myiframe.frameBorder = 0;//FF下有用,IE下无效
</script>
</body>
2)动态建立iframe
<script>
var obj = document.createElement("iframe");
obj.frameborder = 0;
obj.src ="http://blog.csdn.net/cuew1987";
obj.frameBorder = 0;//FF、IE隐蔽边框有用
obj.width = "400px";
obj.height = "400px";
obj.scrolling = "no";
document.body.appendChild(obj);
</script>
3)猎取iframe
<script>
var obj = document.getElementById("myiframe"); //可操纵iframe有关的属性,不能操纵内里的文档
var obj = frames["myiframe"];
</script>
猎取iframe
中的window
对象
<script>
function getIframeWindow(obj){
return obj.contentWindow || obj.contentDocument.parentWindow;
}
</script>
如果是猎取document对象,则
return obj.contentWindow.document || obj.contentDocument;
a>contentWindow
兼容各个浏览器,可获得子窗口的 window 对象。
b>contentDocument
Firefox 支撑,> ie8 的ie支撑。可获得子窗口的 document 对象。
4)猎取iframe
页面高度
function getIframeHeight(obj){
var idoc = getIframeWindow(obj).document;
if(idoc.body){ //W3C
return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);
}else if(idoc.documentElement){ //IE
return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);
}
}
5)父子页面互访
子接见父:
parent.html:
<body>
<div>比及的信息:<div id="msg"></div></div>
<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
</body>
son.html:
<body>
<input type="button" onClick="setMsg()" value="setMsg">
<script>
function setMsg(){
var msg = window.parent.document.getElementById("msg");
msg.innerHTML= "Hello world!!";
}
</script>
</body>
父接见子:
parent.html:
<body>
<div>比及的信息:<div id="setMsg"></div></div>
<input type="button" value="setMsg" onClick="setMsg()"><br>
<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
<script type="text/javascript">
function setMsg(){
var obj = document.getElementById("myiframe");
var msg = getIframeWindow(obj).document.getElementById("msg");
document.getElementById("setMsg").innerHTML = msg.innerHTML;
}
</script>
</body>
son.html:
<body>
<div id="msg">Hello world!!!</div>
</body>