`

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

    Iframe实现跨浏览器自适应高度解决方法

    本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值。分享给大家供大家参考之用。具体方法如下: 该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery。 父页面里面相对简单...

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

    这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。

    jquery ajax应用中iframe自适应高度问题解决方法

    很多管理系统中,都使用iframe进行信息内容的展示方式,或者作为主菜单的链接展示内容。使用iframe的问题就是自适应高度的问题

    iframe窗口高度自适应的实现方法

    domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条由于javascript同源策略的限制...

    iframe自适应大小.docx

    不带边框的iframe因为能和网页无缝的结合...但中iframe的大小却不能像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行。现在来描述一种iframe 动态调整高度的方法...

    如何设置iframe高度自适应在跨域情况下的可用方法

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载。iframe的高度...

    使用postMessage让 iframe自适应高度的方法示例

    有时候,我们会使用 iframe标签,将前端分离项目无感的嵌入 如以Freemark为主体较老的项目中。 我们知道,当iframe内部内容比父页面所指定的宽高大的时候,会出现滚动框。 所以,让iframe的宽高能根据自身内容自动...

    使用jQuery不判断浏览器高度解决iframe自适应高度问题

    这里介绍两个超级简单的方法,不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。 注意别放错了地方。 iframe的代码中,注意要写ID,...

    iframe标签用法详解(属性、透明、自适应高度)

    1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。 提示和注释: 提示...

    使用javascript实现Iframe自适应高度

    方法一: 代码如下: $(window.parent.document).find(“#ContentIframe”).load(function() {  var main = $(window.parent.document).find(“#ContentIframe”);  var thisheight = $(document).height();  if ...

    iframe-resizer-react:Iframe-Resizer的官方React界面

    它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度调整为内容大小。 适用于多个和嵌套的iFrame。 跨域iFrame的域身份验证。 提供多种页面大小计算方法,以支持复杂CSS布局。 ...

    iframe-loader:创建一个iframe \ html5方法postMessage \跨域

    the iframe communicates with its father page,cross domain supported(支持iframe和父页面跨域通信(全屏、高度自适应、滚动监听等) use html5 method postMessage how to use(使用) parent.html(父页面) &...

    自己整理的一个JS函数库 AJAX dom隐藏显示 数据整理 只有12KB 压缩后5kb

    InitHeight(obj) 自适应Iframe高度,Iframe元素的高度随里面的内容自适应高度 Close() 关闭窗口,FF默认不支持窗口关闭 AR(array, n) 删除数组中指定位置的元素 */ /* var data= new Array(); data[2]=Array('lcc1',...

    jQuery 多种对话框

    1、首先在页面中引入ymPrompt.js(如果在iframe中使用且希望消息框显示在最外层页面则还要引入ymPromptEx.js)。 2、然后根据需要显示的消息类型调用对应的函数: (1)Alert(content,width,height,title,okFunc,...

    artDialog_Demo

    25、可以自适应iframe内容的大小(不跨域的前提下) 26、对超过预设面积大小的对话框拖动自动采用替身的方式,以求拖动更流畅 27、新增加一个'data'的接口,它保存了你对话框每次创建的消息对象 (操作iframe消息...

    IBM WebSphere Portal门户开发笔记01

    64、JS自动检测IFRAME内容高度并自动设置为IFRAME高度 338 65、JS MOVETO设置屏幕滚动到最底端或者最顶端 339 66、JS OBJECT方式设置浏览器最大化与最小化 339 67、边框标签FIELDSET 339 68、按钮与A标签的DISABLED...

    超实用的jQuery代码段

    1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

Global site tag (gtag.js) - Google Analytics