iframe去除双滚动条

最新推荐文章于 2024-06-05 15:02:26 发布

super_.

最新推荐文章于 2024-06-05 15:02:26 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript 文章标签： iframe嵌套自带滚动条 iframe自带滚动条去除iframe双滚动条 iframe双滚动条

本文链接：https://blog.csdn.net/super_DuoLa/article/details/117655141

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

iframe嵌套的内容多的时候会自带滚动条

一、问题描述
二、问题处理
- 1.思路
- 2.实现
三、效果

一、问题描述

当iframe嵌套的内容多的时候会自带滚动条，致使出现双滚动条，如图
在这里插入图片描述

二、问题处理

1.思路

使得iframe的高度和自动根据内容的大小进行调控

2.实现

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">
<html>
  <head>
    <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>
  <body>
	   <div id="head">这是共用头<br>
		   <button οnclick="menu(1)">children菜单</button>
		   <button οnclick="menu(2)">daughter菜单</button>
		   <button οnclick="menu(3)">son菜单</button>
	   </div>
	  
	   <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">
<html>
  <head>
    <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>
  <body>
		<h1>这是是son页面</h1> 
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<h1>这是是son页面</h1> 
  </body>
</html>

三、效果

页面大小自动填充，双滚动条消失
在这里插入图片描述

super_.

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
iframe去除双滚动条

iframe嵌套的内容多的时候会自带滚动条一、问题描述二、问题处理1.思路2.实现三、效果一、问题描述当iframe嵌套的内容多的时候会自带滚动条，致使出现双滚动条，如图二、问题处理1.思路使得iframe的高度和自动根据内容的大小进行调控2.实现1、父页面增加以下内容，即根据页面内容动态给iframe高度的赋值：<script type="text/javascript"> function setIframeHeight() { var iframe
复制链接

扫一扫