当前位置:文档之家› iframe自适应高度

iframe自适应高度

iframe自适应高度
iframe自适应高度

iframe 高度自适应

1、目的

系统通过一内嵌页面(iframe) 来展现网页内容(也包括内嵌页中再嵌一个网页),这将会引起如下几个问题:

a.不同的网页内容多少不一致,导致iframe的高度无法与实现内容或浏览器高度相匹配。

b.窗口缩放时,不能iframe不能进行自动调整。

针对这两个问题,写了一些js方法,使iframe自动适应内容或浏览器高度。

2、js代码

在主框回页面中包括如下js方法:

/**

* 内嵌页面的高度设置

*/

function handleFrameLoad() {

var hDoc = getBodyHeight(document);

var tblmain = document.getElementById('tblMain');

var mFrame = window.mainFrame;

var hFrameDoc = getFrameHeight(mFrame);

var hTable = hDoc-80; //减去该页面除iframe外其他控件所占的高度.

if(hFrameDoc > hTable) hTable = hFrameDoc;

tblmain.style.height = hTable;

mFrame.height = hTable;

if(window.mainFrame.moduleRight != null){

//表示该内嵌页,包含内嵌的页面,页iframe的id固定为moduleRight。

initFrameHeight(mFrame,hTable);

}

}

/**

* 获取当前页面的高度

*/

function getBodyHeight(doc){

if(doc.all) return doc.body.offsetHeight;

else return doc.body.scrollHeight;

}

/**

* 获取内嵌页中的高度.

* 若另含子内嵌(moduleRight)页时,应考虑该页面的高度.

*/

function getFrameHeight(mFrame){

var h1 = mFrame.document.body.offsetHeight;

var h2 = mFrame.document.body.scrollHeight;

if(mFrame.moduleRight != null){

var h3 = mFrame.moduleRight.document.body.scrollHeight;

if(h3 > h2) h2 = h3;

}

return h2;

}

/**

* 设置子内嵌页面的高度.

* 通过设置iframe所在table的高度来调整。

*/

function initFrameHeight(frame,hFrame){

var tbl = frame.document.getElementById('tblMainFrame');

tbl.style.height = hFrame;

}

3、其他设置

主页面(main.jsp),在加载完毕(onload)、窗口大小调整(onresize),以及iframe的加载完毕时,需调用:handleFrameLoad,代码如下:

这么的这种也是跟上面的解决方法类似的代码

经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari 通过测试。

HTML代码:

复制代码代码如下:

Javascript代码:

下面这个兼容性更好一些

复制代码代码如下:

另一种情况的iframe解决方案(超简单)

重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的) 之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下

1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)

复制代码代码如下:

parent.document.all("框架ID名

").style.height=document.body.scrollHeight;

parent.document.all("框架ID名

").style.width=document.body.scrollWidth;

这里的框架ID名就是Iframe的ID,比如:

复制代码代码如下:

2、给你网站里所有的被包含文件里面每个都加入

复制代码代码如下:

3、OK,收工!

在WINXP、IE6下面测试通过。很简单吧!

实现 iframe 的自适应高度

实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和iframe 同时出现滚动条的现象。

复制代码代码如下:

第三中方法批量iframe自适应:

工作中遇到iframe随所含内容自适应高度的问题,以前在网上看到过类似问题的解决方法,于是搜索一下,找到了一个比较完整的能够兼容浏览器的解决方法,省得自己写了。

虽然不用自己写,思路还是要明白,基本上就是取得iframe属性src所指定的包含文档中内容的高度,然后用来设置iframe自身的高度,在 iframe所在页面载入时对页面中的所有需要自适应高度的iframe进行自动设置,省时省力,如果确定页面中全部iframe都需要自适应高度,直接取得iframe数组给代码,就连ID都不用自己写了,完成程序搞定。(代码贴上来:)

复制代码代码如下:

网上有人改进了方法,解决了当iframe所包含文档内容高度动态变化时自动调整iframe高度的问题,原理是在iframe所在页面不断扫描 iframe包含文档的内容高度并改变iframe自身高度,这种方法貌似解决了问题,但是对页面速度和系统资源占用是否有影响还很难说,感觉方法有些偏执,应该有更好的解决方法。

第四种方法,只针对知道的iframe的ID调用不推荐

复制代码代码如下:

function iframeAutoFit(iframeObj){

setTimeout(function(){if(!iframeObj)

return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.s crollHeight:iframeObj.contentDocument.body.offsetHeight);},200)

}

这贴比较长,没有耐性的朋友请直接拖到帖子末尾的代码示例,或者直接去玩我提供的Demo。

Demo页面:主页面iframe_a.html,被包含页面iframe_b.htm和

iframe_c.html

下面开始讲:

通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。

我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题。另外,在兼容性方面,也研究的不彻底。

这篇文章,希望在这两个方面再做一些深入。

可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧。所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了 iframe的border 和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死 iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦。

传统做法大致有两个:

方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。

方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。

在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个事情,创建了好多副本。

两个方法都只处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,都不太方便。

如果在主窗口做一个Interval,不停的来获取被包含页的高度,然后做同步,是不是即方便,又解决了JS操作DOM的问题了呢?答案是肯定的。

Demo页面:主页面iframe_a.html,被包含页面iframe_b.htm和

iframe_c.html

主页面代码示例:

一直执行,效率会不会有问题?

我做了测试,同时开5个窗口(IE6、IE7、FF、Opera、Safari)执行这个代码,不会对CPU有什么影响,甚至调整到2ms,也没影响(基本维持在0%占用率)。

下面谈谈各浏览器的兼容性问题,如何获取到正确的高度,主要是对

body.scrollHeight和 documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype,不同的doctype应该不会影响结果,但是假如你的页面没有申明doctype,那还是先去加一个吧。

"https://www.doczj.com/doc/a04051030.html,/TR/html4/strict.dtd">

在主页面追加以下测试代码,以输出这两个值,代码示例:

被加载页面,可以切换一个绝对定位的层,来使页面高度动态改变。如果层展开,则会撑高页面高度。代码示例:

style="position:absolute;width:280px;height:280px;display:none;">

下面列出以上代码在各浏览器的测试值:

(bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值)

暂且无视Opera比别人少3像素的问题…可以看出,如果没有绝对定位的东西,两个值是相等的,取哪个都无所谓。

但是如果有,那么各个浏览器的表现不太相同,单取哪个值都不对。但可以找到了一条规律,那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了:

function reinitIframe(){var iframe =

document.getElementById("frame_content");

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight =

iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

这样子,基本解决了兼容性问题。顺便说下,不光绝对定位的层会影响到值,float 也会导致两个值的差异。

如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到的高度值还是维持在展开的高度303,而非隐藏回去的真正值 184,就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生,当从高的页面切换到矮页面的时候,取到的高度还是那个高的值。

可以归纳为,当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,在iframe的添加onload=”this.height=100″,让页面加载的时候先缩到足够矮,然后再同步到一样的高度。

这个值,在实际应用中决定,足够矮但又不能太矮,否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到,只能DOM操作完了之后把高度变小了。

在我的一个实际项目中,在成本和收益之间权衡,我并没有做这个事情,因为每个DOM函数中都要插入这个代码,代价太高,其实层缩回去不缩掉也不是那么致命。包括Demo里,也没有去做这个事情。如果读者有更好的方法,请告诉我。

这是最终的主页面的代码:

附Demo页面:主页面iframe_a.html,被包含页面iframe_b.htm和iframe_c.html

如果只考虑FX和IE,并且,iframe里面内容也不进行DOM操作,那仍然可以用最简单的传统处理方式:

三层框架结构工程设计综合实例讲解

建筑工程 设计说明 一、建筑层数:三层结构形式:框架结构 建设总高度:12.45m 安全等级:二级 室内外高差:450mm 屋面防水等级:二级 耐火等级:二级设计抗震烈度:8度 二、1.尺寸单位:图中尺寸单位除注明者外,柱高以米计,其他均以毫米计。 2.室内±0.0001高出室外0.45m,±0.000相应的绝对标高放线时由甲方与施工单位现场确定。 3.墙体材料:250厚混凝土砌块。 4.地面排水:a.各有水房间找1%坡,坡向地漏。 b.入口处平台向室外找坡1%,找坡后完成面高处低于室内完成面20mm。 5.门窗:a.外门窗坐樘中。 b.内门坐樘开启方向为平开。 c.所有开启扇处均加以设纱扇、纱窗。 6.油漆维护:所有外露铁件均刷银粉漆,做法图集。 7.构造柱做法详见图16。 8.防潮层做法:在墙体0.060处铺设20厚1∶2水泥砂浆加5%防水粉。 三、建筑构造用料做法: 1.地面:地16#陶瓷地砖地面用于卫生间外地面见详细做法 地26#陶瓷地砖卫生间地面用于卫生间见详细做法 2.楼面:楼16#陶瓷地砖楼面用于除卫生间外楼面 楼26#陶瓷地砖卫生间楼面用于卫生间 楼36#PVC塑胶卷材楼面(做详见说明)用于净化区部分楼面 3.踢脚:踢脚16#.面砖踢脚用于除卫生间外楼地面部分 4.墙裙:裙16#釉面砖墙裙用于卫生间部分 5.室内墙面:内墙16#水泥砂浆墙面用于除踢脚墙裙以外部分 6.天棚:顶16#.彩钢板吊顶吊顶采用50厚彩钢复合析,内填不燃材料 顶26#.水泥砂浆顶棚要求耐火等级不低于1.0小时,用于净化区,吊顶高2.2m。 7.外墙面:外墙16#涂料外墙面见立面图 涂料16#乳胶漆 8.屋面:屋16#.高聚改性沥青卷材防水层面 9.台阶:台16#.地砖面层台阶

Div 部分刷新 利用iframe刷新div 利用AJAX刷新部分div

Div 部分刷新 利用iframe刷新div 利用AJAX刷新部分div 一般的WEB页面,当用户访问时,会按需请求一个新页面,而这个新页面很大一部分的内容其实跟原页面是相同的,无非是某一行内容,或者某一小块内容要被刷新,这时候如果把整个页面再重新请求一遍,就很不划算,这时候我们可以使用一种部分刷新方法,就是使用HTML的iframe 标签。 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。这个标签的可用属性如下: 其中我们需要注意的是一个src 属性,它指定了在这个iframe块中你要用于显示的原代码。 例如: 好,下面我们就可以用JAVASCRIPT改变iframe块的内容,来实现页面的部分刷新了,示例代码如下:

1 <%@ Page Language="C#" AutoEventWireup="true" %> 2 //... 3 4 5 Lesson 1 - Demo 1 - IFrame "Ajax" 6 13 14 15

16
17 Page Load: 18 <%= DateTime.Now.ToLocalTime() %> 19
20
21 Current Time: 22 23
24 25
26 27 28 29 在这个页面中,先显示一个Page Load:的时间,以及一个按钮,然后一个iframe块,当点击按钮的时候,我们在它的响应函数refresh()中改变iframe块的src属性,也就是页面地址(url参数变化也算地址变动)这样就会引起这个iframe重新被加载,那个参数中用了一个?new Date()型参数,这样保证了每次都是不同的参数,每次都要变,如果这儿是个固定值比如"123"那么只有第一次点的时候变,而后面就不变了。但事实上,请求的一直都是IFramePage.aspx页面,只是每次都被服务端重新加载了,这样就会显示iframe更新的时间随按钮点击而变化,但页面load的那个时间是始终不变的。 下面是IFramePage.aspx的代码: 1 <%@ Page Language="C#" AutoEventWireup="true" %> 2//... 3

CSS表单设计

CSS表单设计 文章出处:https://www.doczj.com/doc/a04051030.html, 今天我们开始学习《十天学会web标准(div+css)》的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一、改变文本框和文本域样式 如果前边几章学习的比较扎实的话,本节教程就相当容易了。下边先说一下文本框,文本框和文本域都是可以用css进行美化的。比如改变边框精细,颜色,添加背景色、背景图像等。请看下边的实例: .text1 { border:1px solid #f60; color:#03C;} .text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;} .text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;} .text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;} 这四个样式表分别对应第2、3、4、5行表单,第一行是文本框的默认样式;第二行为设置边框和字体颜色的样式;第三行为设置边框、宽度、高度、字体大小、行高的样式;第四行设置边框和增加背景色和背景图片;第五行为增加一个gif动画的背景图片,看起来是不是生动许多,具体步骤不再赘述。下面我们看一下文本域的样式设置: .area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;} 上图中第一个为默认的文本域样式,第二个为设置边框、宽度为百分比、高度和景图片。overflow:auto定义当内容不超过现在文本域高度时不出现滚动条。好了,下面运行一下代码看看两者的效果吧

让iframe自适应大小 解决方案

让iframe自适应大小解决方案 第一种: 2,创建iframe.html 页面,里面含有一些内容。 这是iframe页面,通过在父窗口页面或子页面添加JS来自动更改宽高,以适应内容的多少。 要想使iframe自动适应宽和高,可以在test.html 页面iframe onload处增加一些JS代码。如: 这样iframe即可以自动适应高度了。如果不在onload处增加js,那也可以放到页面上来调用。比如写个函数。 这样也可以达到自适应高宽的目的,在这里要注意的是,iframeElement参数必须是 document.getElementById("iframeid"),iframeWindow参数是window.frames[0] 或 document.frames["ifrname"]。这是因为通过name得到的对象是窗口(window)对象,非窗口里的iframe 对象。同时document.getElementById("iframeid)不能像window对象可以得到window.document。 所以这里最好给iframe分别加上name和id,id用来更改宽高样式属性,name用来执行window相关事件如location.href,document.write。bgColor例外,元素对象和窗口对象都可以得到,这是因为他们都有这个属性。

js调用父窗口函数-iframe父窗口和子窗口相互的调用方法

js调用父窗口函数-iframe父窗口和子窗口相互的调用方法iframe父窗口和子窗口相互的调用方法解决方案[详细][全]来源:互联网收集分享:QQ1663551688 iframe父窗口和子窗口相互的调用方法集锦一、父窗口调用iframe子窗口方法 1、HTML语法: 2、父窗口调用子窗口:myFrame.window.functionName(); 3、子窗品调用父窗口:parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 4、父窗口页面源码: functionsay(){ alert("parent.html------>I'matparent.html"); } functioncallDhild() { //document.frames("myFrame").f1(); myFrame.window.say(); } 5、子窗口页面: functionsay() { alert("child.html--->I'matchild.html"); } functioncallParent(){ parent.say(); }

fancyBox中文文档(教程) (1)

fancyBox 中文文档 fancyBox 为您的网页提供惊艳的缩放功能,同时支持图片、网页内容以及各种多媒体文件。 她基于目前最流行的jQuery 框架开发,不仅易于应用,而且可以定制。欢迎来到fancyBox 的世界~ ?更新日志 ?快速入门 ?常见用法 ?官方演示 ?使用许可&下载地址 ?完整API ?常见问题 更新日志 重大变更 ?可扩展的幻灯片导航工具 ?响应式(调整浏览器窗口大小时自适应窗口大小) ?集成幻灯片图片播放功能

?新增幻灯片过渡效果 ?引入CSS3阴影、圆角特效 ?新的插件选项(与之前版本不兼容) ?改用知识共享署名-非商业性使用3.0许可协议授权 即将上线 ?WordPress小插件 ?重构本站及API文档 ?完善缩略图浏览工具 ?fancyBox 手机版(待定) ?fancyBox 3.0 ↑回顶部 快速入门 1. 下载fancyBox,解压后根据需要将文件复制到网页文件夹中(建议不要更 改目录结构),并在网页源码中引入相应的css 样式和js 文件(如果更改了目录结构,引入的时候请调整相应代码,对应它们所在的路径)。 注意:别忘了还要先加载jQuery 库!推荐使用公共库:百度 | 新浪。示例代码: < !-- 引入 mousewheel 插件(可选,如果想通过鼠标滚轮控制图片播放则必须) --> 2. 给触发fancyBox 特效的元素(如一张缩略图或“点击我”三个字)加上a 链接,并将其href 属性值设置为遮罩层中需要展示的文件的链接(如刚刚那张缩略图的原图的网址)。示例代码: 3. 使页面加载完毕时初始化fancybox() 函数。如果你不懂jQuery但英语还行,请看官方推荐的新手教程。英语不好肿么办?请点右上角的红叉...因为暂时找不到中文版的帮助文档。示例代码:

iframe的详细用法

iframe的详细用法 IFRAME 元素| iframe 对象 -------------------------------------------------------------------------------- 创建内嵌浮动框架。 成员表 下面的表格列出了iframe 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。 标签属性/属性 SHOW: 标签属性/属性 行为 集合 事件 滤镜 方法 对象 样式 标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。APPLICATION APPLICATION 表明对象的内容是否为HTML 应用程序(HTA),以便免除浏览器安全模式。 ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间,包括3D 边框。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的frame 或iframe 的window 对象。 DATAFLD dataFld 设置或获取由dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DATASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值,或者元素设置为重复的简单持续终止时间。firstChild 获取对象的childNodes 集合的第一个子对象的引用。

老庄结构之框架实例

第一个实例的问题汇总 一、结构布置时框架柱两侧需有框架梁拉结 特别是边跨开洞、有楼电梯间等情况,更需要控制扭转变形框架刚度需要均衡分布 单跨框架

框架布置局部砖混 二、结构计算时的偶然偏心 1、《高规》 2、对于《抗规》中的建筑结构,《抗规》没有明确规定在计算单向水平地震作用时是否应该计算偶然偏心的影响,抗规文中根本没有“偶然偏心”一词,仅5.2.3条文说明中出现:

SATWE软件尚不具备将边榀框架乘以增大系数来考虑水平地震作用扭转影响的功能,故这种增大系数在实际工程中应用起来并不方便。 抗规条文说明3.4.2: 李国胜在《多高层钢筋混凝土结构设计中疑难问题的处理及算例》3.13条明确指出:高层建筑结构水平地震作用下的最大位移,应在单向水平地震作用下,不考虑偶然偏心的影响,采用考虑扭转耦联振动影响的振型分解反应谱法进行计算,并应采用刚性楼板假定。 三、梁柱偏心和柱与节点的偏心

四、框架梁贯通面钢筋的选择 而次梁和楼板是共同承担竖向荷载的不承担地震水平力,无需粗钢筋贯通,架立箍筋即可 梁截面高度:1、窗户;2、连续梁1/15~1/18;3、配筋率2%以下;4、配筋不超过2排;

次梁4米以下跨度用200,6米以下跨度用250,8米左右跨度用250或300(注意面积配箍率);框架梁6米左右跨度可用250,8米左右跨度可用300或350(400)(四肢箍)。 五、纵筋配筋率 非框架梁 最小配筋率用h,最大配筋率 六、箍筋 框架梁

注意纵筋直径的8倍; Psv=肢数x单肢面积/(截面宽x箍筋间距) 七、梁架立钢筋 八、柱 1、刚度需要; 2、轴压比 加密区与纵筋直径有联系

java web 学习笔记,超详细好用

一、文件上传入门 1. 应用: 用户上传头像、上传图片、邮件上传附件等 2. 页面表单的实现 文件上传表单和普通表单有两个区别 1) 表单的提交方式必须是 post 2) 需要文件上传字段 3) form 表单的 enctype 属性需要指定为 multipart/form-data 3. 服务器端解析request 在 Servlet 中通过 request.getInputStream 获得表单上传数据,会发现数据是分段发送的由于自己写程序解析有难度,我们可以使用Apache 开发的开源组件Commons-fileupload 需要导入 jar 包Commons-fileupload 和Commons-io 4 . UploadServlet 中处理文件上传程序

二、文件上传处理细节 1. 中文乱码问题 1) 文件名中文乱码问题,解决办法:告诉文件上传组件以什么编码方式来解码文件名 ServletUpload.setCharacterEncoding(“utf-8”); request. setCharacterEncoding(“utf-8”); 2) 普通字段中文乱码问题 fileitem.getString(“utf-8”); 2. 临时文件 3. 文件存放目录 1) 目录需要隐藏,禁止外界直接访问 2) 文件名需要保证不重复 3) 文件应该分目录存放

三、上传进度条 1. 实现进度监听 需要实现对文件上传进度的监听,需要给FileUpload 对象添加 ProgressListener 2. 在jsp 页面显示进度 实验: 1) 使用 iframe 发送请求,请求一个Servlet, 在Servlet 中返回响应,发送自增的num 此时会发现 iframe 会不停第想Servlet发送请求 2) 点击文件上传按钮后,iframe立刻停止刷新,直至上传完毕页面跳转至新页面 3)为了观察实验结果,将form 的 target 指定为 iframe, UploadServlet回送上传完毕的结果 4) 出现上述问题的原因,浏览器不支持多线程同时访问服务器只能同时发送一个请求, 这样的访问方式为同步访问 5) 要在文件上传的同时在iframe中实现进度访问,就需要ie浏览器与服务器进行异步交互 此时就需要 XMLHttpRequest 对象 在javascript中可以直接使用XMLHttpRequest 对象与服务器进行异步通信 获得XmlHttpRequest 对象的方式有两种 ie7以上版本 var xhr = null; if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); ie7以下版本 if(window.ActiveXObject) xhr = new ActiveXObject(“Microsoft.XMLHTTP”); 获得对象后需要调用open方法输入请求地址 注意请求方式,地址的输入,并且需要设置为true 指定异步访问该地址 xhr.open(“get”,”/upload/servlet/UploadServlet”, false) // 调用send 方法发送请求,post方式需要发送消息体,get方式则不用直接传入null值 xhr.send(null); // 访问 responseText 属性获得 Servlet 回送的数据 document.write(xhr.responseText);

多层住宅框架结构设计实例与分析

多层住宅框架结构设计实例与分析 摘要:本文基于现行规范,结合近年来参与的油田住宅项目工程实例,利用概念设计,对多层住宅框架结构的梁、柱等重要结构构件设计以及电算过程中需注意的问题进行了总结探讨,为以后类似的工程设计积累经验。 关键字:现浇板共同作用梁铰接轴压比剪跨比 Abstract:Based on the present regulation, in this paper, according to the oil field house project construction sample, through the concept design, it is necessary to conclude and discuss in the multi-layer house frame construction beam, column design and zooming process for references. Key Words: cast plate combined action; beam pin joint; axel pressure ratio; snip span ratio 一、概述 胜南社区南苑新区二期住宅,以90型2单元为例,七层框架结构,建筑物总高度为19.8m,总建筑面积为2668m2。抗震设防烈度为七度、设计地震分组为第二组,设计基本地震加速度值为0.10g。场地土类型为软弱场地土,场地类别为III类。钢筋混凝土结构抗震等级:三级;地基基础设计等级:丙级;结构的设计使用年限:50年。二、梁设计 在框架梁的弹性受力分析和承载力计算时,是否考虑现浇板的共同作用效应?如果和对梁端跨进行调整?下面结合本工程从概念设计的角度做粗浅的探讨,以利于工程的优化设计。 2.1关于现浇板共同作用的考虑 目前框架结构均采用梁板整体现浇,在水平荷载作用下,通过框架梁和现浇板的共同受弯来约束柱顶的转动,使柱子产生自上而下的反弯曲。由于梁板的共同作用,不仅提高了框架梁的截面刚度,还提高了梁端负弯矩承载能力。在现浇板共同作用下,对梁的设计采取以下措施进行调整: 2.1.1为实现“强柱弱梁”的目的,形成具有延性的结构,梁端弯矩在SATWE 程序的调整信息下调整,梁端弯矩的条幅系数取0.85; 2.1.2 本工程现浇楼板采用刚性楼板假定,考虑到现浇楼板对梁抗扭的有利作用,对梁的扭矩进行折减,折减系数取0.4; 2.1.3 梁和楼板连成一体按照“T”形截面梁工作,因此对梁的刚度进行放大,边框架梁刚度放大系数取1.2,中间框架梁取1.4.

html5,布局,模板

竭诚为您提供优质文档/双击可除 html5,布局,模板 篇一:干货!全新的免费html5网页模版 干货!全新的免费html5网页模版 目前互联网上存在很多专业的高质量html5模版,并且是免费的,如果你熟悉编程的话,只需要研究一下它们的代码就可以学到很多便捷的操作和新的技术。在今天的文章当中我不是列出一长串可用模版的列表,而是精挑细选出高质量的响应式html5模版。更重要的是,它们都是免费的,所以我希望能有几个模版能满足的你的需求,能够运用于你的项目当中。 codester legend legend是一个基于twitterbootstrap的多功能响应式 单页模版。你可以用它来制作一个登录页,或者说是创意设计人员的线上作品展示网站,甚至于是构建一个商务主题站。 caprice liquidgem liquidgem利用css媒体查询和百分比布局给出了一个

完整的响应式设计。它还包括一个图片幻灯,一套完整的php 联系表单和一个工作示例页面。 mnml 一个轻量级的模版,用于html5/scss的响应式项目。 Varna 免费,开源,极简的响应式网站模版。 agency agency是基于twitterbootstrap建立的响应式html5商务模版。 century 拥有工作分类和音乐播放器的响应式html5模版。 mori-dark 极其简约的响应式博客模板。 篇二:html5网站布局 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe 的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下js函数: 一、程序代码 functionsetwinheight(obj)

js操作frame详细解说,window.opener和window.parent的区别

frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent window.opener引用的是window.open打开的页面的父页面。 window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面。可以这样window.frames["iframe"].window.save(); window.frames[0].document.getElementByIdx_x('xx'); 可以这样 window.frames[0].document.body.innerHTML; frm = window.parent.window.frames['uploadFrame']; frmDocument = frm.document; frm.sb(3); //sb 是uploadFrame页面里的一个函数 对于firefox 如果你遇到报错:parent.document.frames has no properties 换为如下代码就可以了,这个代码IE,ff兼容. frm = window.parent.window.frames['uploadFrame'];其实frames 集合并不是挂在document 而是挂在window 对象下. 注意这样修改frame里的页面有限制,就是必须是同域下的,否则无法访问 如果是同一域下,但是子域名不同,那么涉及到的js,html文件都加上一句。document.domain = https://www.doczj.com/doc/a04051030.html, [这里填写你的域名] document.getElementByIdx_x('iframeid').contentWindow.document.getElementByIdx_x('someel ementid'); window.opener 实际上就是通过window.open打开的窗体的父窗体。 比如在父窗体parentForm里面通过window.open("subForm.html"),那么在subform.html中window.opener 就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。 如:1,window.opener.test(); ---调用父窗体中的test()方法 2,如果window.opener存在,设置parentForm中stockBox的值。

html特效代码大全精美免费下载

html特效代码大全精美免费下载.txt每天早上起床都要看一遍“福布斯”富翁排行榜,如果上面没有我的名字,我就去上班。谈钱不伤感情,谈感情最他妈伤钱。我诅咒你一辈子买方便面没有调料包。 HTML代码大全免费下载 HTML特效代码1。忽视右键 或 2。加入背景音乐 IE: NS: *.mid你的背景音乐的midi格式文件 3。简单的window.open方法 文字或图片 参数解释: js脚本结束 4。简单的页面加密