iframe内容汇总

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的跨域请求,还是算了吧,别要强了.