iframe的常规用法就不说了,就那么用,这里总结一下iframe里其他的用法和功能
1.iframe高度自适应
iframe的高度自适应需要获取iframe文档的实际高度,然后给引入文件的iframe标签设置行高.设置方法是通过JS获取iframe的contentWindow属性,获取iframe文档的高度.
// HTML
<iframe id="iframe" src="test22.html" frameborder="1"></iframe>
// JS
var iframe = document.getElementById("iframe");
iframe.onload = function(){
this.height = this.contentWindow.document.documentElement.scrollHeight;
}
当浏览器加载iframe的时候,会创建一个新的window对象出来, contentWindow就是由加载iframe创建的window对象,然后通过获取contentWindow的实际高度,然后给iframe标签设置高度,从而实现自适应高度的效果.同样也能获取iframe文档流里的元素
iframe.onload = function(){
console.log(this.contentWindow.document.getElementsByTagName("span"));
}
2.点击iframe修改父级元素
跟上面的过程正好相反,上面需要在父级上找到iframe的高度然后设置,这个需要在iframe上找到父级的DOM,然后进行修改
// 子元素的点击方法
btn.onclick = function(){
window.parent.document.getElementsByTagName("div")[0].innerHTML = 2;
}
window.parent就是父级窗口,能找到所有父级的DOM元素
3.iframe 父级和子级方法相互调用
父级的JS代码
var iframe = document.getElementById("iframe");
function dian(){
// son()是子级的函数名
console.log(iframe.contentWindow.son());
}
子级的JS代码
var btn = document.getElementById("btn");
btn.onclick = function(){
// 父级页面的函数名
window.parent.father();
}
4.iframe的跨域
iframe也可以像jsonp那样获取数据,数据显示在iframe里,但是有别于jsonp的获取方式,iframe能显示,但是无法获得子元素里的内容,这涉及到安全问题,所以想通过iframe的方式实现jsonp的跨域请求,还是算了吧,别要强了.
