最近在前端页面遇到了一个问题,我在一个页面中利用iframe框架引入了一个页面进来,但是这个页面的高度是不叫高的,高出电脑屏幕很多,

所以就引发了iframe框架一个滚动条,然后主页面一个滚动条,这样页面就出现了两个滚动条。在网上查了好久,一直没有好的方法,直到我在

网上看到了iframe高度自适应,才解决了这个问题。

自适应的意思是,iframe框架的高度自动适应引入的HTML文件的内容高度,显在页面上的iframe的高度就是引入的文件的高度,这样就解决了公用一个滚动条的问题

js代码:

function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
}; window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
}; html代码:
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

参考网址:http://caibaojian.com/iframe-adjust-content-height.html(iframe高度自适应的6个方法)

如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)的更多相关文章

  1. iframe框架的应用

    同学接私活,我写几个页面. 后台系统,点击侧栏菜单后,右边div的要显示对应的内容.就是说,没选一下左边的菜单,右边的内容都要变化. 这次首先尝试了一下Oldfasional办法--iframe框架. ...

  2. Javscript调用iframe框架页面中函数的方法

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

  3. 取代iframe框架

    一.frameset1. 属性①border设置框架的边框粗细.②bordercolor设置框架的边框颜色.③frameborder设置是否显示框架边框.设定值只有0.1:0 表示不要边框,1 表示要 ...

  4. bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)

    我需要完成的效果: 1.在顶级页面打开模态框,并且遮罩层也要再顶级页面 2.单击遮罩层部分,模态框不关闭 问题描述: 不知为什么,可能是bootstrap前端框架添加遮罩层的一些问题.通过子页面在顶级 ...

  5. iframe框架及优缺点

    iframe框架及优缺点 HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别 基本使用 src:规定在iframe中显示的文档的URL. f ...

  6. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  7. 当session过期后自动跳转到登陆页而且会跳出iframe框架

    写项目时在重定向后一直存在一个问题就是重定向后登陆页面会出现在跳出的子框架里.

  8. session失效后,登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  9. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

随机推荐

  1. leetcode 四数之和

    这里我们可以考虑将 n 数之和降低为一个数加上 n-1 数之和的问题.依次降低 ,最低是二数之和的问题 ,二数之和问题容易解决.主要在于从 n 到 n-1 的过程需要理解 :下列代码中前几个 if 是 ...

  2. HANA数据自助查询

    SAP HANA的客户端是C/S模式的,远程使用不太方便,目前有一款TreeSoft数据库管理系统,可以实现通过web方式,访问自助查询HANA数据.大大提高工作效率.还支持MySQL,Oracle, ...

  3. MySQL创建用户、授权、删除

    1.在MySQL中创建新用户 使用具有shell访问权限的root用户登录MySQL服务器并创建名为“rahul”的新用户.下面的命令只允许从localhost系统访问用户rahul的MySQL服务器 ...

  4. mysql中单个字段包含','转换成多条记录

    问题:把value中的值取出作为另外一个表的where条件时,必须把value中的用','分隔的每一个id截取出来 解决方法: ),) ) #本文参考自网络某文章,非原创

  5. 从物联网防火墙himqtt源码谈哈希和红黑树的应用场景区别

    从物联网防火墙himqtt源码谈哈希和红黑树的应用场景区别 himqtt是首款完整源码的高性能MQTT物联网防火墙 - MQTT Application FireWall,C语言编写,很多数据结构适合 ...

  6. Adobe Acrobat 如何通过书签制作多级目录

    废话不多说,直接上官方文档 看不清可 右击 > 在新标签页中打开图片

  7. Java学习笔记-Lambda表达式

    Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用简洁的代码来创建只有一个抽象方法的接口(这种接口被称为函数是接口)的实例 意义 自从Java 8开始,Java支持Lambda表达 ...

  8. 算法详解之Tarjan

    "tarjan陪伴强联通分量 生成树完成后思路才闪光 欧拉跑过的七桥古塘 让你 心驰神往"----<膜你抄> 一.tarjan求强连通分量 什么是强连通分量? 引用来自 ...

  9. [Cometoj#3 B]棋盘_状压dp

    棋盘 题目链接:https://cometoj.com/contest/38/problem/B?problem_id=1535 数据范围:略. 题解: 因为行数特别小,所以$dp$的时候可以状压起来 ...

  10. 小菜鸟之oracle

    oracle 存储过程 函数 创建 删除 参数 传递 函数 查看 包 系统包 分类: Oracle 2011-10-27 17:31 264人阅读 评论(0) 收藏 举报   认识存储过程和函数 存储 ...