iframe去除双滚动条_iframe嵌套导致两个滚动条

相关文章推荐
完美的砖头 · autohotkey GroupBox - ...· 3 周前 ·
痴情的青椒 · 校友会快讯｜“外滩智本汇”沙龙第十一期活动： ...· 1 年前 ·
阳光的蚂蚁 · 童话镇哔哩哔哩晚会 - 抖音· 1 年前 ·
坐怀不乱的铅笔 · 有哪些脑洞很大的漫画？ - 知乎· 1 年前 ·
飞奔的大脸猫 · 女针头鬼来了！2022恐怖新片《养鬼吃人》首 ...· 1 年前 ·
重情义的蟠桃 · 叶罗丽：六位仙子一起掌管仙境银行，守门人黑香 ...· 1 年前 ·
1、父页面增加以下内容，即根据页面内容动态给iframe高度的赋值：
<script type="text/javascript">
	     	function setIframeHeight() {
		 		var iframe =document.getElementById('iframe0');
		 		iframe.height=400;
		 		var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
		 		if (iframeWin.document.body) {
			 		iframe.height = Math.min(iframeWin.document.documentElement.scrollHeight,iframeWin.document.body.scrollHeight)+60;
			 		window.scrollTo(0,0);
			 		return iframe.height;
	 		//事件会在窗口或框架被调整大小时发生
	 		window.onresize = function(){
	 			setIframeHeight();
	</script>
完整版代码 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>嵌套父页面</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <style type="text/css">
		#head {
			height: 300px;
			width: 100%;
			background-color: green;
			text-align: center;
			color: #fff;
			font-size: 20px;
		#foot {
			height: 300px;
			width: 100%;
			background-color: blue;
			text-align: center;
			color: #fff;
			font-size: 20px;
</style>
	<script type="text/javascript">
	     	function setIframeHeight() {
		 		var iframe =document.getElementById('iframe0');
		 		iframe.height=400;
		 		var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
		 		if (iframeWin.document.body) {
			 		iframe.height = Math.min(iframeWin.document.documentElement.scrollHeight,iframeWin.document.body.scrollHeight)+60;
			 		window.scrollTo(0,0);
			 		return iframe.height;
	 		//事件会在窗口或框架被调整大小时发生
	 		window.onresize = function(){
	 			setIframeHeight();
	</script>
  </head>
	   <div id="head">这是共用头<br>
		   <button οnclick="menu(1)">children菜单</button>
		   <button οnclick="menu(2)">daughter菜单</button>
		   <button οnclick="menu(3)">son菜单</button>
	   <iframe id="iframe0" class="J_iframe content" name="iframe0" height="400px" width="100%"  src="/TestModel/test/son" frameborder="0" data-id="" seamless></iframe>
	   <div id="foot">这是共用尾</div>
	   <script type="text/javascript">
		   function menu(str){
			   var src="/TestModel/test/children";
			   if(str=='1'){
				   src="/TestModel/test/children";
			   }else if(str=='2'){
				   src="/TestModel/test/daughter";
			   }else if(str=='3'){
				   src="/TestModel/test/son";
			   $("#iframe0").attr("src", src);
	   </script>
  </body>
</html>
2、每一个子页面都增加如下内容，调用父页面的“动态给iframe高度的赋值”方法： 
 <script type="text/javascript">
		$(document).ready(function(){
			parent.setIframeHeight();
        });
</script> 
完整版代码 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>嵌套子页面</title>
     <script type="text/javascript" src="/TestModel/js/jquery-2.1.1.js"></script>
 	 <script type="text/javascript">
		$(document).ready(function(){
			parent.setIframeHeight();
     </script> 
  </head>
		<h1>这是是son页面</h1> 
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<h1>这是是son页面</h1> 
  </body>
</html>
页面大小自动填充，双滚动条消失
 
                                    花了一个多小时，终于解决了因为iframe框架出现两个滚动条的问题。原理( 借鉴了网上kaka的思路，但是js与他写的不一样)是：
1.强制隐藏最上层窗口的滚动条
2.获取浏览器窗口的高度
3.用浏览器窗口的高度减去头部iframe的高度就是内容iframe的高度了
$(function(){
                                     使用框架（无论是frameset、frame、iframe）嵌套网页的时候，如果子网页的高度超过了预先设定的高度，会出现滚动条，也就是尺寸溢出，一般来说如果高度超了就出现垂直滚动条，宽度超了就出现水平滚动条，但是在IE6中，只要尺寸大于等于预定高度，就会两个滚动条一起出现，这好象是一个bug。解决方法：在子网页设置css如下：html {overflow-y:auto
iframe可以在原有的页面中嵌入一个新的页面，在所嵌入的新的页面中会出现相关的滚动条。
二、问题解决方案
直接控制iframe框架，使其不能出现滚动条。具体相关的代码如下所示：
<iframe :src="srcUrl" frameborder="0" scrolling="no"></iframe>
以上相关的关键代码为：
frameborder="0" scrolling="no"
// 1.子页面传递消息到父页面
// 2.父页面接收到消息后下发指令到子页面 （如下setElements 指令）
// 3.子页面接受指令，隐藏滚动条，并通过监听页面高度变化向父页面传递消息（传递高度）
parent.postMessage('{"name":"connect"}', '*'); 
window.addEventListener('message', function(event) {
    var data = event.data;
2、：去掉右边的滚动条且保留底下的滚动条
       如果只想保留底下的滚动条，那么可以在嵌入的页面里设置 body{overflow-x：auto ; overflow-y：hidden；}
3、 去掉全部的滚动条
第一个方法：
                                    一般情况下我们很少用到iframe（框架），但有些特殊的情况下我们不得不使用iframe，那么或许或遇到嵌套内容不全屏，网页周围有边框，双滚动条等等情况，下面来说一下处理技巧。
全屏与边框处理：
<meta http-equiv="Content-Type" content="text/html; charset=utf...
                                    经过查询发现，是因为iframe元素不是标准的块级元素，导致虽然设置了height: calc(100% - 60px);然后通过控制台查看高度也确实没有问题。但是就是出现了滚动条，这样的话，就只能通过设置iframe为块级元素来确定了。如果大家想要自己测试一下的话，可以下载下面的代码，然后通过对29行中，display:block;的注释和非注释来看下具体的表现形式；页面头部一个固定的div元素，下面是一个iframe嵌套的页面。但是发现页面会出现滚动条。
                                    最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示
根据代码可以猜测，出现两个滚动条，其中一个肯定是iframe中内容过多出现的滚动条，这个也正是我们实际所需要的滚动条，另外一个滚动条不知道到是如何出现的，但是猜测可能与easyui-tabs控件本身有关，出现滚动条，可以肯定的是内容超出了高度范围，而我们所熟知的隐藏超出内容的方式就是overflow：hid...
$(document).ready(function(){
  if(window.parent != window){
    parent.document.getElementById("mainMenuIframe2").style.height = (document.body.scrollHeight+30)+"px
                                    解决方案一：去掉文件开头的文档声明。不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明，一是代码不规范，二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;，而实际上B文件的高度（长度）是800px左右。var pageHeight = (document.body.clientHeight?document.bod
在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。
下面是通过jquery.layout.js来解决双滚动条问题。
html代码
&lt;body &gt;
		&lt;div id="mainFrameDiv" class="ta...
                                    我的页面中使用了iframe框架 这个时候会出现页面及iframe两个滚动条
我现在只想保留iframe的 去掉页面的滚动条
PS：iframe 的滚动条这样设置了 scrolling="auto"
 .el-dialog {
  .el-dialog__body {
   max-height: 500px !important;    // max-height:calc(100vh - 170px);
   min-height: 100px;
   overflow-y: hidden;
                                    要想去掉外面的滚动条，保留ifrmame或者frame的滚动条的话，可以设置ifame的height百分比，往小处设置就会发现外面的滚动条越来越短，直至消失。（外部的滚动条要设置为自动哦）