iframe 页面自适应长宽

脚本:

复制代码
View Code
// 调用 IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");
//iframe高度自适应
  function IFrameReSize(iframename) {
         var pTar = document.getElementById(iframename);
      if (pTar) {  //ff
          if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
              pTar.height = pTar.contentDocument.body.offsetHeight;
          } //ie
          else if (pTar.Document && pTar.Document.body.scrollHeight) {
              pTar.height = pTar.Document.body.scrollHeight;
          }
      }
  }

  //iframe宽度自适应
  function IFrameReSizeWidth(iframename) {
      var pTar = document.getElementById(iframename);
    
      if (pTar) {  //ff
          if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {
              pTar.width = pTar.contentDocument.body.offsetWidth;
          }  //ie
          else if (pTar.Document && pTar.Document.body.scrollWidth) {
              pTar.width = pTar.Document.body.scrollWidth;
          }
      }
  }
复制代码

页面调用:

View Code
<iframe name="paymentIframe" id="paymentIframe" onload='IFrameReSize("paymentIframe");IFrameReSizeWidth("paymentIframe");'
        src="/docc/blank.jsp" align="center" allowtransparency="true" scrolling="auto" width="100%"  height="100%"
        frameborder="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" noresize></iframe>

 

在新增或修改iframe信息后的js中也需要重新设置IFrame的长宽。

IFrameReSize("paymentIframe");IFrameReSizeWidth("paymentIframe");

 

posted on   陈惟鲜的博客  阅读(462)  评论(0编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?

导航

< 2013年4月 >
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 1 2 3 4
5 6 7 8 9 10 11
点击右上角即可分享
微信分享提示