操作iframe的一些方法

//父页面操作iframe里的内容

oInput.onclick=function(){

　　var oBox = oIframe.contentWindow.document.getElementById("box");//获取window对象

　　var oDocument = oIframe.contentDocument.getElementById("box");//获取document对象 

}

//iframe操作父页面里的内容

window.parent.document.getElementById('box');

window.top.document.getElementById('box');

window.onload=function(){

　　//添加iframe;

　　var oIframe = document.createElement('iframe');

　　oIframe.src='iframe1.html';

　　document.body.appendChild(iframe);

}

oIframe.onload=function(){

　　// do something

　　console.log(11);

}

//ie下绑定事件

oIframe.attachEvent("onload",function(){

　console.log(111);

})

//防止钓鱼网站

if(window.top!==window.self){

　　window.top.href = window.location.href;

}

//撑高iframe的高度

function changeHeight(){

　　oIframe.height = oIframe.contentWindow.document.body.offsetHeight;//jquery不行的话 用js试下document.getElementById('default').contentWindow.document.body.offsetHeight

}

changeHeight();

 

//iframe里操作父页面的高度

window.parent.document.documentElement.scrollHeight || window.parent.document.body.scrollHeight；

 

//CSS如何让iframe实现自适应高度的效果

<div class="resp-container">

    <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>

</div>

.resp-container {

    position: relative;

    overflow: hidden;

    padding-top: 56.25%;

}

.resp-iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

position: absolute;这将为iframe提供相对于包装器的位置，并将其放置在包装器的填充上。

top: 0并left: 0用于将iframe定位在容器的中心。

width: 100%并且height: 100%使IFRAME采取所有包装的空间。

完成后，你应该得到一个响应的iframe。

 

网上摘抄的一些笔记，如有错误，麻烦指正~