iframe高度自适应及隐藏滚动条的实例详解

iframe高度自适应及隐藏滚动条的实例详解

在工作中，我们可能会遇到自己公司和其他的公司达成合作关系，从而共同开发某个项目。而这时候，我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下，我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理iframe时的一些心得。

高度自适应

<iframe src="http://huichang.qunar.com/huiQunar" id="myiframe" frameborder=no scrolling="yes" style=" overflow-x:scroll; overflow-y:hidden; " width="100%" ></iframe>

<script type="text/javascript" language="javascript">
  var ifm= document.getElementById("myiframe");
  ifm.height=document.documentElement.clientHeight;
</script>

高度自适应并且隐藏滚动条

<html>
<head>
  <script type="text/javascript">
    function showS()
    {
      document.getElementById("test").scrolling="yes";
      document.getElementById("test").style.overflow="scroll";
      //alert(document.getElementById("test").scrolling);

    }
    function hideS()
    {
      document.getElementById("test").scrolling="no";
      document.getElementById("test").style.overflow="hidden";
      //alert(document.getElementById("test").style.overflow);
    }
  </script>

  <style>
    <!-- .ifr{width:600px;height:600px;background:#fff;overflow:hidden;display:block;position:absolute;top: 0;left: 0;right: 0;} -->
  </style>
</head>
<body>
<div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style="  width: 100%;  height: 100%;">
  <iframe id="test" width="100%" height="100%" frameborder="0" src="" style="margin:0px;" ></iframe>
  <script language="JavaScript">
    var iframe = document.getElementById("test");
    iframe.src = "http://huichang.qunar.com/huiQunar";
    //以下判断iframe是否加载完,并且隐藏滚动条
    if (iframe.attachEvent){
      iframe.attachEvent("onload", function(){
        //hideS();
        //document.getElementById("loading").style.display="none";
      });
    } else {
      iframe.onload = function(){
        //  hideS();
        //document.getElementById("loading").style.display="none";
      };
    }
  </script>
</div>
</body>
</html>

取巧的方式隐藏滚动条

取巧的方式就是，我们给iframe的宽度设置成101%，这样就可以把滚动条隐藏到屏幕外面，在将其overflow-x设置成hiden就行。这种方法在移动端 就没必要了。

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • JS解决iframe之间通信和自适应高度的问题

    JS解决iframe之间通信和自适应高度的问题

    首先说明下,iframe通信 分为:同域通信 和 跨域通信. 一. 同域通信 所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe 比如: <iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA">的B.html页面,这两个页面数据进行通信

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

    本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus

  • jsp页面iframe高度自适应的js代码

    以下操作写在body里面,form表单外 <iframe id="agentFrame" name="agentFrame" src="" width="0" height="0" style="display:none;" ></iframe> <script type="text/javascript"> function se

  • JS实现iframe自适应高度的方法(兼容IE与FireFox)

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: 之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了.后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来.我已经用过了,真的好用.尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面,并且修改一下ID名就行了(注意,要修改的地方有两个,位置在代码中有说明). 向原创这段代码

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

    这里介绍两个超级简单的方法,不用写什么判断浏览器高度.宽度啥的. 下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的. 注意别放错了地方. iframe的代码中,注意要写ID,没有ID查找不到 复制代码 代码如下: <iframe src="test.html" id="main" width="700" height="300" frameborder="0&q

  • JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="

  • javascript 中iframe高度自适应（同域）实例详解

    javascript 中iframe高度自适应(同域) 今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframei

  • jQuery简单实现iframe的高度根据页面内容自适应的方法

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式2: //注意:下面的代码

  • iframe高度自适应及隐藏滚动条的实例详解

    iframe高度自适应及隐藏滚动条的实例详解 在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目.而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面.而这种情况下,我们一般都会选择去使用iframe达到我们的目的.但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得. 高度自适应 <iframe src="http://huichang.qunar.com/huiQunar" i

  • Android 沉浸式状态栏与隐藏导航栏实例详解

    Android 沉浸式状态栏与隐藏导航栏实例详解

    1 前言 一般我们在Android的APP开发中,APP的界面如下: 可以看到,有状态栏.ActionBar(ToolBar).导航栏等,一般来说,APP实现沉浸式有三种需求:沉浸式状态栏,隐藏导航栏,APP全屏 沉浸式状态栏是指状态栏与ActionBar颜色相匹配, 隐藏导航栏不用多说,就是将导航栏隐藏,去掉下面的黑条. APP全屏是指将状态栏与导航栏都隐藏,例如很多游戏界面,都是APP全屏. 所以,在做这一步时,关键要问清楚产品狗的需求,免得白费功夫. 下面,分别来介绍这三种方式的实现. 2

  • 微信小程序scroll-view隐藏滚动条的方法详解

    效果图: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示: 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条,需要在样式里加上 核心代码: 在w

  • 微信小程序图片自适应支持多图实例详解

    微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

  • HTML中使背景图片自适应浏览器大小实例详解

    HTML中使背景图片自适应浏览器大小实例详解 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> : 3.body的background属性去掉,要不然会被遮住. <html> <body> <div id="Layer1" style="position:absolute; left:0px; top:0p

  • C++子类父类成员函数的覆盖和隐藏实例详解

    C++子类父类成员函数的覆盖和隐藏实例详解

    C++子类父类成员函数的覆盖和隐藏实例详解 函数的覆盖 覆盖发生的条件: (1) 基类必须是虚函数(使用virtual 关键字来进行声明) (2)发生覆盖的两个函数分别位于派生类和基类 (3)函数名和参数列表必须完全相同 函数的隐藏 隐藏发生的条件: (1)子类和父类的函数名相同,参数列表可以不一样 看完下面的例子就明白了 #include "iostream" using namespace std; class CBase{ public: virtual void xfn(int

  • Android隐藏标题栏及解决启动闪过标题的实例详解

    Android隐藏标题栏及解决启动闪过标题的实例详解 方法一: 在代码中设置 this.requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 方法二: 在AndroidManifest.xml 里面设置 <application android:icon="@drawable/icon" android:label="@string/app_name" Android:theme="@androi

  • Android ListView 滚动条的设置详解及实例代码

    Android ListView 滚动条的设置详解 1.滚动条的属性 android:scrollbarAlwaysDrawHorizontalTrack 设置是否始终显示水平滚动条.这里用ScrollView.ListView测试均没有效果. android:scrollbarAlwaysDrawVerticalTrack 设置是否始终显示垂直滚动条.这里用ScrollView.ListView测试均没有效果. android:scrollbarDefaultDelayBeforeFade 设

  • Vue触发隐藏input file的方法实例详解

    1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发     ----推荐 <p class="uploadImg"> <input type="file" @change="picUpload($event)" accept="image/*" />

随机推荐