'onload="this.height=document.frames['src'].document.body.scrollHeight"/>例子:1,创建页面test.html。页面中含有一个iframe,name为ifrname,id为ifrid,src为iframe.html页面。2,创建iframe.html页面,里面含有一些" />
当前位置:文档之家› 让iframe自适应大小 解决方案

让iframe自适应大小 解决方案

让iframe自适应大小 解决方案
让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例外,元素对象和窗口对象都可以得到,这是因为他们都有这个属性。

如果要隐藏iframe滚动条,可以设置iframeWindow.scrolling = "no";但这不能兼容多个浏览器,用iframeElement.document.body.style.overflow = "hidden";这种或直接在iframe处增加scrolling="no" html 代码就可以很好地兼容了。

3,如果不能修改父页面,而只能把代码增加在iframe页面里呢?

可以写个类似函数,放在iframe页面里:

4,在线通过iframe更改父窗口里iframe的宽高,因为安全原因会有跨域的问题,若是不在同一域名,那是被禁止的。如果同在一个域名下,但2级域名不同,比如https://www.doczj.com/doc/1715134535.html, 和https://www.doczj.com/doc/1715134535.html,。这时可以通过重新设置document.domain 来跨越2级域名。

var domain = "https://www.doczj.com/doc/1715134535.html,";

try {

if( document.domain.indexOf(domain) != -1 ) {

document.domain = domain; // set new document.domain;

}

} catch (ex) {

alert("error: " + ex.toString() );

}

如果域名含有https://www.doczj.com/doc/1715134535.html,,则改将document.domain改为https://www.doczj.com/doc/1715134535.html,。

第二种:

第三种:

第四种:

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/1715134535.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 集合的第一个子对象的引用。

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);

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/1715134535.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。简单的页面加密