• 几行JavaScript代码搞定Iframe 自动适应

    场景：Iframe嵌入flash,希望flash能随着页面的resize而resize。

    主要代码：

    代码

    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
    • <html>   
    •  <head>   
    •   <title> New Document </title>   
    •   <meta name="Generator" content="EditPlus">   
    •   <meta name="Author" content="">   
    •   <meta name="Keywords" content="">   
    •   <meta name="Description" content="">   
    •   <script type="text/javascript" src="/lrm-suite/js/jquery-2.0.3.js"></script>   
    •   <script type="text/javascript">   
    •     var rpUrl = 'http://172.20.31.18:8080/lrm-suite/rp.xhtml';   
    •      function setAppFrameUrl(selectedUrl) {   
    •         if ($.isReady) {   
    •             activeUrl = selectedUrl;   
    •              $('#appFrame' ).setAttribute('src', selectedUrl);   
    •         } else {   
    •             setTimeout(function() {   
    •                 setAppFrameUrl(selectedUrl);   
    •             }, 100);   
    •         }   
    •     }   
    •   
    •      function setNewActive(imgComp,urlName,imageSrc){   
    •         setAppFrameUrl(urlName);    
    •         imgComp.src = imageSrc;   
    •     }   
    •   
    •     $(document).ready(function(){   
    •     $(window).resize(resizeframe);   
    •     });   
    •   
    •     function resizeframe()   
    •     {   
    •         var margin-top = $('#appFrame' ).css( "margin-top" );   
    •         var topNum = margin-top.toString().slice(0,margin-top.length-2);   
    •         var actualHeight = document.body.offsetHeight - topNum;   
    •         $('#appFrame').css('height', actualHeight);   
    •     }   
    •  </script>   
    •  </head>   
    •   
    •  <body>   
    •   <div class="topMenuBar" id="topMenuBarDiv" style="z-index: 999999">   
    •             <a id="j_idt8">   
    •                 <img src="/lrm-suite/images/Logo.png" alt="" style="float: left; border: 0; cursor: pointer;"    
    •                      onclick="setNewActive(this,rpUrl,'/lrm-suite/images/Logo.png');"/>   
    •             </a>   
    •             .   
    •             .   
    •             .   
    •             .   
    •   </div>   
    •   <iframe id="appFrame" style="border: 0;    
    •              100%;   
    •             position: absolute;   
    •             top: 0;   
    •             left: 0;   
    •             margin-top: 43px;" src="" scrolling="auto" frameborder="0" onload="resizeframe()">   
    •   </iframe>   
    •  </body>   
    • </html>  

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <title> New Document </title>

    <meta name="Generator" content="EditPlus">

    <meta name="Author" content="">

    <meta name="Keywords" content="">

    <meta name="Description" content="">

    <script type="text/javascript" src="/lrm-suite/js/jquery-2.0.3.js"></script>

    <script type="text/javascript">

    var rpUrl = 'http://172.20.31.18:8080/lrm-suite/rp.xhtml';

         function setAppFrameUrl(selectedUrl) {

            if ($.isReady) {

                activeUrl = selectedUrl;

                 $('#appFrame' ).setAttribute('src', selectedUrl);

            } else {

                setTimeout(function() {

                    setAppFrameUrl(selectedUrl);

                }, 100);

            }

        }

         function setNewActive(imgComp,urlName,imageSrc){

            setAppFrameUrl(urlName);

            imgComp.src = imageSrc;

        }

        $(document).ready(function(){

        $(window).resize(resizeframe);

        });

        function resizeframe()

        {

            var margin-top = $('#appFrame' ).css( "margin-top" );

            var topNum = margin-top.toString().slice(0,margin-top.length-2);

            var actualHeight = document.body.offsetHeight - topNum;

            $('#appFrame').css('height', actualHeight);

        }

    </script>

    </head>

    <body>

    <div class="topMenuBar" id="topMenuBarDiv" style="z-index: 999999">

    <a id="j_idt8">

    <img src="/lrm-suite/images/Logo.png" alt="" style="float: left; border: 0; cursor: pointer;"

    onclick="setNewActive(this,rpUrl,'/lrm-suite/images/Logo.png');"/>

    </a> 

    </div>

    <iframe id="appFrame" style="border: 0;

                 100%;

                position: absolute;

                top: 0;

                left: 0;

                margin-top: 43px;" src="" scrolling="auto" frameborder="0" onload="resizeframe()">

    </iframe>

    </body>

    </html>

     分析：

    首先导入JQuery框架，并设置iframe的scrolling="auto",这样的话可以自动的出现滚动条。

    然后添加window的resize事件

    代码

    1.       $(document).ready(function(){   
    2. $(window).resize(resizeframe);   
    3. });   
    4.   
    5. function resizeframe()   
    6. {   
    7.     var margin-top = $('#appFrame' ).css( "margin-top" );   
    8.     var topNum = margin-top.toString().slice(0,margin-top.length-2);   
    9.     var actualHeight = document.body.offsetHeight - topNum;   
    10.     $('#appFrame').css('height', actualHeight);   
    11. }  

    $(document).ready(function(){

        $(window).resize(resizeframe);

        });

        function resizeframe()

        {

            var margin-top = $('#appFrame' ).css( "margin-top" );

            var topNum = margin-top.toString().slice(0,margin-top.length-2);

            var actualHeight = document.body.offsetHeight - topNum;

            $('#appFrame').css('height', actualHeight);

        }

     这样的话，每次浏览器resize的话，都会对iframe重新设置height，从而得到iframe resize的效果。

    后来有人给出了一个另外的解决方案，跟这个原理类似，也贴出来以供参考。

       

    Js代码

    1. var suiteVisible = true;   
    2.   
    3.  function resizeIframe() {   
    4.      var el = document.getElementById("appFrame");   
    5.      if (suiteVisible) {   
    6.          el.style.height = (document.body.clientHeight - 43) + "px";   
    7.      }   
    8.      else {   
    9.          el.style.height = (document.body.clientHeight) + "px";   
    10.      }   
    11.  }   
    12.   
    13.  $(window).resize(function() {   
    14.      if (this.resizeTO)   
    15.          clearTimeout(this.resizeTO);   
    16.      this.resizeTO = setTimeout(function() {   
    17.          $(this).trigger('resizeEnd');   
    18.      }, 500);   
    19.  });   
    20.   
    21.  $(window).bind('resizeEnd', function() {   
    22.      resizeIframe();   
    23.  });  

    var suiteVisible = true;  

    function resizeIframe() {

    var el = document.getElementById("appFrame");

    if (suiteVisible) {

    el.style.height = (document.body.clientHeight - 43) + "px";

    }

    else {

    el.style.height = (document.body.clientHeight) + "px";

    }

    }  

    $(window).resize(function() {

    if (this.resizeTO)

    clearTimeout(this.resizeTO);

    this.resizeTO = setTimeout(function() {

    $(this).trigger('resizeEnd');

    }, 500);

    });  

    $(window).bind('resizeEnd', function() {

    resizeIframe();

    });

      
  • 相关阅读:
    SpringCloud学习笔记(2)：使用Ribbon负载均衡
    SpringCloud学习笔记(1)：Eureka注册中心
    Spring发送电子邮件
    CentOS7.5安装部署GitLab流程
    Shell流程控制及循环
    Shell的条件测试表达式
    Shell变量的数值运算
    Shell脚本简单入门
    Flutter Weekly Issue 58
    Android 开发技术周报 Issue#282
  • 原文地址：https://www.cnblogs.com/ranzige/p/iframe_jquery_code.html
Copyright © 2020-2023  润新知