`

iframe用法及自适应内容高度

阅读更多

一、用法:

  1、页面内加入iframe

       <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>
        scrolling表示是否显示页面滚动条

        可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。

  2、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言:

        <iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe>

        然后,网页上的超链接语句应该写为:<a  href=URL target=aa>

 

 

二、自适应内容高度 

以下代码放入body中:

<!-- iframe自适应高度 -->
<script>
function SetCwinHeight(){
  var bobo=document.getElementById("content"); //iframe id
    if(document.getElementById){
      if(bobo && !window.opera){
          if (bobo.contentDocument && bobo.contentDocument.body.offsetHeight){
             bobo.height = bobo.contentDocument.body.offsetHeight;
          }else if(bobo.Document && bobo.Document.body.scrollHeight){
      bobo.height = bobo.Document.body.scrollHeight+30;
    }
  }
 }
}
</script>

分享到:
评论

相关推荐

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

    本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ```html &lt;iframe src=...

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

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

    Iframe 高度自适应浏览器高度

    一种常见的方法是使用JavaScript或jQuery监听页面的“load”事件,当Iframe的内容加载完成后,获取内容的实际高度并设置给Iframe。例如,使用jQuery: ```javascript $(document).ready(function() { var ...

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性,用于指定要加载的...

    iframe跨域自适应高度模板

    总结来说,`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制,通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见,能帮助我们更灵活地整合...

    iframe自适应子页面内容高度

    本话题将深入探讨如何使`iframe`自适应其子页面的内容高度,确保用户无需滚动主页面即可查看全部子页面内容。 `iframe`的基本结构如下: ```html &lt;iframe src="child-page....

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度,使其能够自动调整以适应内容的高度。 在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的...

    jquery对iframe自适应高度插件

    总之,“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具,它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件,可以避免手动计算和调整`iframe`...

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中,iframe(Inline Frame)是一种内联框架,常用于在同一个HTML文档中嵌入...

    JAVASCRIPT让IFRAME框架的高度自适应

    为了解决这个问题,我们可以使用JavaScript来让IFRAME框架的高度自适应页面内嵌不同的网页内容。 在这篇文章中,我们将介绍使用JavaScript来让IFRAME框架的高度自适应的方法。首先,我们需要定义一个函数来获取当前...

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

    iframe自适应宽高

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

    iframe自适应内容页面的高度

    对于IE8及更早版本,可能需要使用特定的解决方案,如`jQuery`的`$.get()`方法或者`onreadystatechange`事件来获取`iframe`内容的高度。 6. **注意事项**: - 由于同源策略的限制,只有当`iframe`加载的页面与父...

    iframe自适应高度兼容各主流浏览器

    iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:iFrame的基本概念 iFrame(Inline Frame...

    iframe高度自适应

    在某些情况下,如果`iframe`内容与主页面同源,可以使用CSS的`resize`属性来尝试让`iframe`自适应高度。但是,这种方法并不适用于跨域的情况。 2. **JavaScript/jQuery解决方案**: 对于跨域的`iframe`,可以采用...

    JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

    2. `order_list.html`: 这个文件很可能被用作iframe的源,即被嵌入到index.html中的页面,可能包含了一些需要自适应高度的内容。 3. `jquery-1.7.2.min.js`: 这是jQuery库的版本1.7.2的压缩版,它是实现iframe高度...

    js实现iframe自动自适应高度的方法

    在网页开发中,Iframe(内联框架)是一种常见的用于嵌入其他网页或者内容的HTML元素。有时,我们希望Iframe能根据其内部内容自动调整高度,以...希望这个方法能帮助你在开发过程中更好地处理Iframe的自适应高度问题。

    iframe自适应高度的简单解决办法

    总的来说,实现`iframe`自适应高度的方法主要有JavaScript动态计算、jQuery操作和跨域通信三种。根据实际项目需求和兼容性考虑,可以选择合适的方法。在实际应用中,还需要注意浏览器的兼容性和安全问题,确保解决...

    iframe跨域常用问题和iframe页面自适应

    这段代码会在窗口大小改变时,使`iframe`的高度适应其内部内容的高度。 总结,理解和掌握`iframe`的跨域解决方案以及自适应策略,对于开发高效且用户体验良好的Web应用至关重要。在实际应用中,还需要注意安全性、...

    iframe自适应高度demo

    `iframe`的自适应高度是一项关键技术,它确保了嵌入的内容能够完全显示,避免滚动条的出现,从而提供更好的用户体验。 `iframe`的基本语法如下: ```html &lt;iframe src=...

Global site tag (gtag.js) - Google Analytics