`
deserteaglec
  • 浏览: 3716 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

iframe 随页面自动适应大小

阅读更多

<script language="javascript">
  var iframeids = ["showmain"];
  var iframehide = "yes";
  
  function dyniframesize() {
   var dyniframe = new Array();
   for (i = 0; i < iframeids.length; i++) {
   
    if (document.getElementById) {
     dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
     if (dyniframe[i] && !window.opera) {
      dyniframe[i].style.display = "block";
      if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) {
       dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
      } else {
       if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) {
        dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
       }
      }
     }
    }
    if ((document.all || document.getElementById) && iframehide == "no") {
     var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
     tempobj.style.display = "block";
    }
   }
  }
  function resize() {
   dyniframesize();
   parent.dyniframesize();
  }
 
  if (window.addEventListener) {
   window.addEventListener("load", dyniframesize, false);
  } else {
   if (window.attachEvent) {
    window.attachEvent("onload", dyniframesize);
   } else {
    window.onload = dyniframesize;
   }
  }
  
  </script>

 

<iframe marginheight=0 marginwidth=0 frameborder=0 width=100% style="overflow-x:hidden;" height=650 scrolling=no src="" name=showmain id=showmain onload="resize();">不能正常显示</iframe>

 

 

分享到:
评论

相关推荐

    嵌入到HTML的iframe自动适应大小

    1. **初始化**:定义了一个数组`iframeids`,其中包含了需要自动调整大小的iframe的id。在实际应用中,这个数组可以根据需要动态生成或静态定义。 2. **循环处理**:通过`for`循环遍历`iframeids`数组,对每一个...

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    iframe根据页面内容自适应高度和宽度

    } // 当子页面大小改变时,通知父页面调整大小 ``` 通过以上步骤,`iframe-resizer`库能够确保`iframe`始终根据其内容自适应高度,无论内容是否跨域。 总结来说,实现`iframe`根据页面内容自适应高度和宽度,...

    iframe父页面与子页面通信及相互调用方法

    - 使用`iframeResizer`等插件可以自动调整`iframe`的大小,避免因内容变化导致的布局闪烁。 8. **总结** `iframe`通信涉及多个方面,包括同源策略、跨域通信、DOM操作和事件监听。理解并熟练掌握这些技巧对于开发...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    iframe自适应子页面内容高度

    然而,若希望`iframe`的高度自动适应子页面内容,我们需要进行一些额外的处理。 首先,由于同源策略的限制,只有当`iframe`加载的页面与包含它的页面在同一域名下时,我们才能通过JavaScript获取`iframe`的内容信息...

    iframe自动适应高度

    - **Window PostMessage**:这是一种跨域通信方式,通过在`iframe`内容页面发送消息,父页面接收到消息后调整`iframe`的高度。例如,`iframe`内的页面可以发送一个包含其高度的消息,然后父页面监听这个消息并更新`...

    iframe高度自适应.pdf

    实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时,通过JavaScript动态计算嵌入内容的实际高度,并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时,如何让`&lt;iframe&gt;`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...

    多个iframe自动调整大小的问题

    怎样用一个函数,自动调整这个页面里所有iframe的高度呢? function change_size(iframe) { iframe.style.height=info_content.document.body.scrollHeight+1+”px”; } 我用过这种方式,但是等号后面的第一个对象...

    iframe-resizer:在页面链接,嵌套和多个iFrame中,支持大小相同的跨域iFrame,并支持窗口内容大小调整

    iFrame Resizer V4 通过该库,可以自动调整... 检测可能导致页面调整大小的事件(“窗口调整大小”,“ CSS动画和过渡”,“方向改变”和“鼠标”事件)。 通过在iFrame和主机页面之间简化了消息传递。 修复了iFrame中

    iFrameAutoSize:用于创建自动调整大小的 iFrame 的 JavaScript 库,即使它们来自不同的域

    然而,由于浏览器的安全策略,iFrame的内容通常不会自动适应其容器的大小,这可能导致滚动条的出现或者内容被截断。为了解决这个问题,"iFrameAutoSize" 是一个专门设计用来解决iFrame跨域自动调整大小问题的...

    Iframe框架自动适应高度示例详解.pdf

    在一些特殊情况下,我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容,尽管通过OCR扫描技术出现了一些识别错误,但是核心的代码和思路是清晰的,能够帮助我们理解如何实现Iframe高度的自适应。 从...

    iframe自适应高度

    利用CSS的`resize`属性可以调整元素大小,但这不适用于`iframe`,因为浏览器的安全策略限制了跨域访问`iframe`内容的属性。不过,如果`iframe`内容和父页面同源,可以使用CSS `display: flex`和`height: auto`来实现...

    完全搞定iframe(框架)里的滚动条.doc

    2. **可伸展的iframe**:允许iframe根据B页面内容的长度自动调整其高度,从而适应内容的变化。 #### 解决滚动条问题的方法 针对上述两种情况,可以采用不同的方法来解决滚动条问题,包括使用CSS和JavaScript技术。 ...

    IFRAME自适应

    "IFRAME自适应"是针对不同设备和屏幕尺寸,确保IFRAME内容能够自动调整其大小以适应页面布局的关键技术。在响应式设计中,IFRAME自适应尤其重要,因为它能让内容在手机、平板电脑和桌面电脑等不同设备上呈现良好的...

    gravity-forms-iframe:“重力表单”插件,用于将表单嵌入外部网站上自动调整大小的iframe中

    重力式Iframe附加组件 在任何网站上的iframe中嵌入重力表单。... 另外,只要表单高度发生变化,iframe就会自动调整大小,例如,由于条件逻辑而显示或隐藏字段时。 产品特点 有选择地启用嵌入单个表格。 自动调整ifr

    JAVASCRIPT让IFRAME框架的高度自适应

    在窗口大小调整时,我们也需要调用handleFrameLoad函数来重新设置IFRAME框架的高度,以确保IFRAME框架的高度能够自动调整以适应窗口的大小变化。 在IFRAME框架中,我们可以使用table元素来控制IFRAME框架的高度。在...

    iframe自适应内嵌页的高试,无srcoll

    1. **自适应高度**:为了让`&lt;iframe&gt;`内容自动调整高度以适应内容,通常需要通过JavaScript来实现。一种常见方法是通过监听`load`事件,在页面加载完成后动态设置`iframe`的`height`属性。另外,可以使用CSS的`...

    Flex中利用IFrame解决嵌入HTML时Flex组件被遮挡和IFrame被隐藏的问题

    同时,确保IFrame的大小能够适应嵌入的HTML内容,可以使用`width`和`height`属性或者设置`frameborder`为0以适应内容自动调整大小。 在IFrameTest这个示例项目中,开发者可能已经实现了针对Flex菜单遮挡问题的解决...

Global site tag (gtag.js) - Google Analytics