zoukankan      html  css  js  c++  java
  • 操作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定位在容器的中心。

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

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

    网上摘抄的一些笔记,如有错误,麻烦指正~
  • 相关阅读:
    金额数字每隔3位用逗号区分
    tomcat结合shiro无文件webshell的技术研究以及检测方法
    python使用p12个人证书发送S/MIME加密,签名邮件
    CVE-2020-9484 tomcat session反序列化漏洞分析与复现
    Apache CommonCollection Gadget几种特殊的玩法
    weblogic t3协议回显穿透nat思路
    weblogic T3/iiop 回显分析
    ysoserial gadget之DNSURL gadget分析及实战利用
    CVE-2020-2555 weblogic 反序列化gadget 复现
    通达OA最新RCE漏洞分析
  • 原文地址:https://www.cnblogs.com/xuniannian/p/9843270.html
Copyright © 2011-2022 走看看