iframe出现双层滚动条解决方案

zZoOoOJaVa 2014-06-24

在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。

下面是通过jquery.layout.js来解决双滚动条问题。

html代码

<body >
		<div id="mainFrameDiv" class="tabqh ui-layout-north">
			<div class="menu">
                 <ul id="tabs">
					<div id="liText"><div>
                 </ul>
			</div> 
		</div>
		<div class="ui-layout-center" >
			<iframe src="" frameborder="0" id="bottom_frame" name="bottom_frame" width="100%"
				height="100%"></iframe>
		</div>
</body>

同时引入下面js文件

<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/plugin/layout/jquery.layout.js"></script>

在初始化时执行

$(document).ready(function () { 
       $('body').layout({
			north: {
					size:40,
					spacing_open:0,
					closable:false,
					resizable:false
			},
			center: {
					size:20,	
					spacing_open:0
			}
		});
}）

下面是效果图

: zZoOoOJaVa

相关推荐

微前端介绍

微前端就是将不同的功能按照不同的维度拆分成多个子应用。微前端的核心在于拆, 拆完后在合!希望每个团队都可以独立开发，独立部署怎么破？当路径切换时加载同的子应用。从而解决了前端协同开发问题。2018年 Single-SPA诞生了， single-spa 是一

架构技术交流 0喜欢 / 0评论 2020-07-28

WEB前端第五课——HTML表单

　　iframe为内联框架，iframe元素是可以创建包含另外一个文档的行内框架，是body的子集。<iframe src="" name="topframe" frameborder="0"

haohong 0喜欢 / 0评论 2020-07-18

selenium三大切换，三大等待

time.sleep() # 使用time模块强制进行等待，单位s. # 将选择器的方式，改成BY模块。工作中常见用法如下。显示等待的等待条件，应用场景。整理一下用到的包和常规的简写。1，切换iframe，通过iframe名字。2，通过索引去切换。6，切

tiankele0 0喜欢 / 0评论 2020-06-26

selenium中三大窗口切换

　　这类窗口也就是我们常说的句柄，句柄的切换是有必要的，我们自己手动在网页上从操作的话，产生新的句柄时浏览器会自动的帮我们跳转到最新的句柄处，但是我们在做UI自动化的时候，代码并不会帮我们自动的切换到最新的句柄，需要我们使用代码去进行切换　　　　。除了切换

xiangxiaojun 0喜欢 / 0评论 2020-06-25

00022-layui 显示表单，iframe父子页面传值

<div class="layui-form" lay-filter="orderPayForm" id="orderPayForm" style="padding: 20px 1

pythonclass 0喜欢 / 0评论 2020-06-04

00022-layui 显示表单，iframe父子页面传值

<div class="layui-form" lay-filter="orderPayForm" id="orderPayForm" style="padding: 20px 1

WebVincent 0喜欢 / 0评论 2020-06-03

一篇文章高效定位iframe

今天跟大家分享的是如何高效的定位iframe。我们来看一段最早的代码：。进入了iframe以后就像进入了一个盒子，盒子里面的东西可以找到，可是盒子外面的东西是找不到的。所以当我们操作完成，继续定位发现下图方框处变成Top Window时，证明这已经不是if

sixthelement 0喜欢 / 0评论 2020-05-30

【selenium学习 -9】iframe的切换

在测试中，有时会遇到一个网页用iframe嵌套另一个网页的情况，如我们今天实验的例子。如果要操作计算器的页面元素，需要首先切换到计算器的iframe上面。切换到iframe上的四种方式，一般情况下用id和name就能解决绝大多数问题。# 4.用WebEle

云之高水之远 0喜欢 / 0评论 2020-05-19

selenium iframe 定位

发现NAME属性不能定位，不具有唯一性，有三个NAME值一样的IFRAME。当时具体情况是：IFRAME有三个属性，NAME，SRC，CLASS。三个IFRAME除了SRC值不一样外，其它两个属性的值都一样。所以只能通过SRC值来区分IFRAME了。<

云之高水之远 0喜欢 / 0评论 2020-05-17

Socket.IO入门原理

node.js提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。Socket.io将Websocket和轮询机制以及

Chydar 0喜欢 / 0评论 2020-05-15

Django之clickjacking攻击

clickjacking攻击又称作点击劫持攻击。是一种在网页中将恶意代码等隐藏在看似无害的内容（如按钮）之下，并诱使用户点击的手段。这样当用户试图“播放视频”时，实际是被诱骗而进入了一个购物网站。

tuxlcsdn 0喜欢 / 0评论 2020-04-17

关于form表单提交数据后不跳转页面+ajax接收返回值的处理

--正文区域--多行文本框-->. vartext=$.contents().find.text();//获取iframe里的内容。String header= part.getHeader;// 获取请求头--form-data; name=&qu

ajaxtony 0喜欢 / 0评论 2020-02-03

1.10、html内嵌框架

<iframe>标签会创建包含另外一个html文件的内联框架，src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：

STPace 0喜欢 / 0评论 2020-02-03

ajax文件上传

基本原理是将form提交到iframe里，要设置form的target属性，并且定义一个回调函数，不能定义在iframe里，服务器返回对此回调函数的调用；iframe可以隐藏；

学留痕 0喜欢 / 0评论 2013-05-11

selenium自动化测试入门定位frame和iframe中的元素对象

< frame> <iframe> 标签，浏览器会在标签中打开一个特定的页面窗口（框架），它在本窗口中嵌套进入一个网页，当用selenium定位页面元素的时候会遇到定位不到frame框架内的元素的问题。driver.get # 打

云之高水之远 0喜欢 / 0评论 2020-01-05

ajax技术初识与应用

Ajax不是一种新的编程语言，而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的We

TONIYH 0喜欢 / 0评论 2019-12-20

iframe实践小结：如何实现父页面向子页面传递数据

需要注意的是：主页面与子页面的sessionStorage不是共享的，而是相互独立，另外postMessage只支持原生js写法，不支持jq获取id

nimeijian 0喜欢 / 0评论 2019-12-15

jquery 实现iframe 自适应高度

超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。注意别放错地方了哦。<iframe name="rightIframeName&quo

我只是个程序员 0喜欢 / 0评论 2014-01-18

markdown中使用iframe 嵌套网页

更多精彩文章请关注王明昌博客

HankelBao 0喜欢 / 0评论 2019-11-21

「简单实战」YouTube IFrame Player API 的使用

业务需求需要在自己的网页上嵌入油管上的视频，所以去踩了油管 IFrame Player API 的坑。其实和大多数国内视频网站的 ifram Embed 方式是相似，比如说爱奇艺、腾讯视频、优酷等。在这些视频网站上你会发现都有分享功能，其中有一项就是通用

ForEachkaka 0喜欢 / 0评论 2019-11-04

跨域解决方案

js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。DOM同源策略：禁止对不同源页面DOM进行操作。AJAX同源策略

李永毅 0喜欢 / 0评论 2019-11-01

PHP+iframe模拟Ajax上传文件功能示例

本文实例讲述了PHP+iframe模拟Ajax上传文件功能。分享给大家供大家参考，具体如下：。在xmlhttprequest level 1中，Ajax是不能够上传文件的，因为js不能操作本地文件，但是市场上有一些Ajax异步上传文件的插件，是怎么完成的呢

不言而喻i 0喜欢 / 0评论 2019-07-02

TOGAF初始阶段 - 快速游览

在TOGAF的初始阶段，你会完成和启动活动准备迎接新的企业架构的业务指导。在这段视频中，我们将带您浏览在初始阶段执行的主要步骤。

mansai 0喜欢 / 0评论 2017-12-28

JQuery针对document

一个页面A里嵌入了iframe，iframe里的src也是一个页面B. 在A页面通过script引入了JQuery的脚本库，但是在B. 页面无法使用，因为$是针对当前的document. 所以需要在B里重新引入

崔博伦一路有你 0喜欢 / 0评论 2014-11-09

配置chrome支持本地（file协议）ajax请求

将html代码拖拽进入chrome通过file协议浏览时，发送的ajax请求本地文件，会报跨域错误。解决办法是给chrome添加启动参数：--allow-file-access-from-files ，这样本地ajax请求就不会报跨域错误了。　　添加了--

chongxiaocheng 0喜欢 / 0评论 2016-01-05

使用 iframe 引用优酷和土豆和腾讯视频，支持 HTML5 手机播放

iframe属性：allowtransparency iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。allowfullscreen 启用 iframe 的内容以在全屏模式下显示。如果缺少，则仅 iframe可以进

MrWhite0 0喜欢 / 0评论 2015-12-31

form 表单伪 Ajax 提交

有时候，你可能有这样的需求，就是提交表单的时候，不想刷新本页面。但你又不想用Ajax，有什么方法呢？这时可以在页面中用<form>和<iframe>实现。原理大概是这样实现的。这个target属性的值frameFile,是form之

kentrl 0喜欢 / 0评论 2016-05-03

14.5 富文本编辑【JavaScript高级程序设计第三版】

富文本编辑，又称为WYSIWYG。在网页中编辑富文本内容，是人们对Web 应用程序最大的期待之一。虽然也没有规范，但在IE 最早引入的这一功能基础上，已经出现了事实标准。而且，Opera、Safari、Chrome 和Firefox 都已经支持这一功能。这

我的电子世界 0喜欢 / 0评论 2017-05-15

document.frames不兼容火狐的问题

获取页面中嵌入的iframe的对象时，使用document.frames.document或者document.frames['testFrame']来获得id为testFrame的iframe的DOM对象时，用火狐调试的时候，提示document.fra

Hansion 0喜欢 / 0评论 2018-01-15

微前端 —— 理论篇

它们通常与技术栈无关，不同的应用可以用react开发，也可以用vue开发，但是它们始终能组成一个完整的应用。

许学德 0喜欢 / 0评论 2019-09-07

php+js实现的无刷新下载文件功能示例

本文实例讲述了php+js实现的无刷新下载文件功能。分享给大家供大家参考，具体如下：。步骤就是，设置头文件参数，然后读入并输出文件。下面代码的file_get_contents可以使用fread，fclose代替。在很多时候，我们下载文件的操作，都是在前端

hebiwtc 0喜欢 / 0评论 2019-08-23

【转】Jquery修改iframe内容

在iframe子页面获取父页面元素代码如下:$;// 搞定...在父页面获取iframe子页面的元素代码如下:$. $.html();根据iframename取得其中ID为"testId"元素$.find.html()

ruoyiqing 0喜欢 / 0评论 2018-12-19

Jquery Ajax代替iframe

var parames={ "type1":"paramer1","type2":"paramer2"}; $.ajax({url:'myTest.html', type:'p

DarryZhao 0喜欢 / 0评论 2018-10-08

ajax上传图片

而本文实现的文件上传也是无页面刷新的，可以说是一种"类似AJAX"方法。当然Ajax出现之后，人们一窝蜂地投奔Ajax 的阵营了，iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。

Balalala 0喜欢 / 0评论 2018-06-21

我的理解：http协议中302和303的区别

http1.0协议中只有302码，没有303状态码； http1.1,在默认情况下，很多服务端基础程序，为了兼容http1.0，在遇到本应响应303时，也给客户端响应了302。场景: 在整个web系统使用https的情况下，在程序中使用了redirect，

88251048 0喜欢 / 0评论 2015-01-18

手机浏览器调用app

alert("暂不支持当前系统！

翟浩浩Android 0喜欢 / 0评论 2015-01-12

前台技术

ajax+div替代iframe框架实现无刷新嵌入其他页面。2012年的36个优秀前端开发教程。盘点：崛起中的九大HTML5开发工具

RedGuyanluo 0喜欢 / 0评论 2012-12-16

iframe跨域导致session丢失

在一个应用的某个page中,通过IFrame的方式嵌入另一个应用的某个页面.当两个应用的domain. 不一样时,在被嵌入的页面中不允许使用cookie.在XPSP2和IE6之后，从安全性角度考虑，默认状态下不允许在iframe里使用跨站点cookie。使

春天来了 0喜欢 / 0评论 2012-05-03

zt-如何在IE安全限制往iframe框架内的网站写cookie

今天平台联调时,把我们的产品挂在其他平台的<iframe>框架时,发现登录不了,原来是不能写cookie,通过网上资料查询,找到了解决办法.这也算是一个长期困扰我的一个问题，就是A站iframe其它站(B站)的内容时，B站的页面获取不到B站种下

Android程序员 0喜欢 / 0评论 2011-07-18

使用 commons-fileupload iframe 实现页面无刷新多文件上传

使用了commons-fileupload-1.2.2.jar和commons-io-2.0.1.jar两个组件。final long maxSize = 1000 * 1024 * 1024;final String[] suffix = new Str

strburnchang 0喜欢 / 0评论 2011-07-26

原生JS与Jquery删除iframe并释放内存-IE

当项目以tab页签方式打开多个iframe窗口时，关闭tab页签同时也需要关闭iframe并释放内存资源，主要是针对IE浏览器。//把iframe指向空白页面，这样可以释放大部分内存。

80437916 0喜欢 / 0评论 2019-07-01

源码解读JS与Native通信原理-WebViewJavascriptBridge

native能获取到window环境，执行JS。native能截获H5页面跳转，故而JS端可以通过动态创建iframe来告诉native，我发请求了。所以setupWebViewJavascriptBridge是异步的，并且以后调用native提供的方法也

mbcsdn 0喜欢 / 0评论 2019-07-01

记前端hybrid学习总结

什么是hybridhybrid即“混合”,即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到server端hybrid存在价值可以快速迭代更新体验流畅减少开发和沟通成本,双端公用一套代码webview是app中的一个组件用于加

叨校长灬 0喜欢 / 0评论 2019-07-01

a标签可下载文件而ajax的get请求不行

原理a标签是直接访问跳转到文件url，浏览器判断是个可下载文件就会自动下载。get是ajax，只能返回string类型的数据，而文件url是一个对应的是一个文件流，ajax接收不到。因此a标签、form标签、iframe标签都可以。

DreamPig 0喜欢 / 0评论 2019-06-30

自动注册appleid

&page=create')问题1：该iframe必须是https的,找个https的服务器就行了问题2：该iframe连接的ws也必须是wss的才行，需要加证书3. 最后还是用nightmare写了一段自动注册的脚本blesstosam 的 gi

appleid 0喜欢 / 0评论 2019-06-30

前端面试【整理更新中】：HTML常见题目（带答案）

DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。* 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏

红壶吃猬队 0喜欢 / 0评论 2019-06-29

前端--iframe爬坑记录

我想这是由于vue基于组件来构建页面的原理所造成的，所以再一次构建组件时，会向window再次添加监听器。

YJmeditation 0喜欢 / 0评论 2019-06-28

【转】Jquery修改iframe内容

在iframe子页面获取父页面元素代码如下:$;// 搞定...在父页面获取iframe子页面的元素代码如下:$. $.html();根据iframename取得其中ID为"testId"元素$.find.html()

hackcat 0喜欢 / 0评论 2018-12-19

一次排查页面重复请求的经历

前段时间重构一个页面，页面中存在通过第三方JavaScript代码插入的动态广告，上线后发现第三方的广告资源存在重复请求的问题。由于控制广告插入的JavaScript代码由第三方提供，我们只负责按照他们要求的方式引入即可，所以对JavaScript代码内容

wayne0 0喜欢 / 0评论 2019-06-28