//父页面操作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。

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

最新文章

  1. 简单的ViewPager了解Scroller类
  2. [pyqt4]mark
  3. noip2013 火柴排队
  4. AngularJS入门
  5. 使用python来调试串口
  6. phpcms学习总结
  7. [Unity菜鸟] Unity发布web后,从HTML调用本地文件
  8. hdu3999The order of a Tree (二叉平衡树(AVL))
  9. [基础]RHEL6下LINUX服务器批量部署
  10. C++中string中的erase函数怎么使用
  11. WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案
  12. 【算法】螺旋方阵 上交OJ1021
  13. gnocchi resource批量删除
  14. vue.js学习系列-第二篇
  15. 解决:MVC对象转json包含\r \n
  16. js 第二课
  17. 图-&gt;连通性-&gt;关节点和重连通分量
  18. 用github搭建网站
  19. 【推荐】ImageProcessor.Web,再也不用自己生成缩略图了
  20. 670. Maximum Swap

热门文章

  1. NO3:步履蹒跚-完成第一章节学习
  2. ffmpeg解码RTSP/TCP视频流H.264(QT界面显示视频画面)
  3. Mybatis generator配置文件及说明
  4. Oracle 12c 新特性之 数据库内归档(In-Database Archiving)
  5. 牛客网字节跳动冬令营网络赛J Sortable Path on Tree —— 点分治
  6. 杂项-权限管理:Spring Secutity
  7. python unittest之断言及示例
  8. DevExpress 柱状图
  9. 网络编程中阻塞和非阻塞socket的区别
  10. mysql-日志种类