不建议使用iframe

2024-11-03

为什么要尽量少使用iframe

Iframes 阻塞页面加载及时触发 window 的 onload 事件是非常重要的.onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕.当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢. window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发.在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况. 唯一的连接池浏览器只能开少

做贴吧系统，偶然发现使用iframe的弊端

个人拙见常听人说起现在不建议使用iframe框架,而我却一再使用,也许是能力有限,一直没在意有什么弊端. 我这此使用的事左右iframe框架,并且只在主页中定义了大背景,每个页面并没有分别定义背景, 当在浏览器中,使用右键选择在新窗口打开的时候,弊端自然显露. 另外在浏览器蜘蛛爬行时遇到iframe会认为站点为死站点,被搜索引擎视为不友好的表现. 二月七日来补充一下浏览器解析当前页面html代码,不会解析iframe中src链接内部的内容. 内部网站比如OA系统一般不需要考虑网站

iframe兄弟间和iframe父子间的值传递问题

在网上查了资料.iframe的参数传递问题.有很多答案都是不可行的.现在将收集的资料整理一下.已经验证通过.以下如有问题请及时指正. 1. iframe兄弟之间值传递举例说明:index页面中有两个iframe:iframe1和iframe2,如下图: 在iframe1中:有一个input输入框,一个变量f1,函数f1Func. // 获取iframe1,parent是index页面的window对象. var iframe1 = parent.frames["myframe1"];

上传文件的三种方式xhr,ajax和iframe及上传预览

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .upload { display: inline-block; background-color: #ef4300; cursor: pointer; width: 100px; height: 35

Javascript 判断 iframe 中的变量是否为对象

Javascript 判断 iframe 中的变量是否为对象前言公司之前的项目中,为了实现模块化,在 web 后端使用了 iframe 来组织框架和页面.由于当时没有很好地规划,iframe 子页面和框架主页面里面的 js 类库经常混用(即 iframe 子页面利用 top 对象调用框架主页面的方法),因此出现了本例的 chrome 中 iframe 子页面中的变量值在框架主页面中判断是否为对象的问题. 复现本文借助 chrome 的控制台模拟框架主页面和 iframe 子页面在框架

LayUI左侧菜单无法保持选中状态

1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模块连接只要点击就会刷新当前页面及左侧菜单,如果值刷新右侧内容也就不会出现这样的情况. 但是在左侧菜单作为模板页是必须要刷新的,例如在模块管理下添加一个模块,要立刻显示当前添加的模块. 如果引用iframe的方法只刷新右侧内容也不能解决当前的问题,况且iframe的性能并不是特别好.所以这里不建议采用

html+css基础知识

这是自己学习html时候做的一些记录,供大家参考 <!-- 块和内联块元素:独占一行的元素 div p h ul div没有任何语义,就是一个纯粹的快元素就是为了方便布局 span是内联元素(行内元素):只会占用自身大小的元素,不会占用一行常见的内联元素:a img iframe span span没有任何意义,可以设置样式块元素主要用来实现页面布局,内联元素主要选中文本设置样式一般情况下只是用块元素去包含内联元素,内联元素不去包含块元素 a元素可以包含任何元素,除去本身 p元素中不能

html 05-HTML标签图文详解（二）

05-HTML标签图文详解(二) #本文主要内容列表标签:<ul>.<ol>.<dl> 表格标签:<table> 框架标签及内嵌框架<iframe> 表单标签:<form> 多媒体标签滚动字幕标签:<marquee> #列表标签列表标签分为三种. #1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的意思

iFrame 功能详解

目录索引: 一. 简介二. 属性三. 功能四. 应用一.简介网页“帧”的概念最早是由Netscape所提出,当时全部由“帧”构成的页面,也被称之为 “框架集”页面,在一个“框架集”页面中,“帧” 是其最小构成单位,每个帧都是一个窗口,用于实现在一个框架集页面中载入许多其它页面.而且,W3C也为其推出了三种文档类型之一的框架型: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://ww

jquery load 和 iframe 比较

如果要加载的东西比较简单,里面的没有复杂的数据和逻辑,可以使用load.如果要加载的页面自身有复杂的逻辑.操作,还是建议使用ifame,因为iframe里面可以引入自身的js和样式,而load引入的东西,还得使用主页面的js和样式进行控制.另外,应当注意,iframe加载的东西不用考虑主页面的任何东西,比如样式,js的变量名等.但load进来的东西就得注意一下. load进的内容和主页面共享同一块内存,而iframe是两块内存

ajax+div 代替iframe 学习尝试

工作的时候遇到了所谓html内多tab展示的情况,主要是通过iframe来关联子页面: 不过也不知道从何时开始记得是说iframe不建议多用,所以想想,还是找找有没有其他方法(不应用于工作): 先说下关于用iframe的感觉吧,第一次尝试实际应用,iframe都有至少一个form在里面,而且主页面是为了做关于一个tab提交form之后提示并切换到下一个tab,主页面负责加载了tab的源地址即xxx.jsp ,那么当时的做法时,iframe提交后javascript调用父页面的js方法实现tab切

iframe异步加载技术及性能

我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog里面有阐述:Using Iframes Sparingly: iframe会阻塞主页面的onload事件主页面和iframe共享同一个连接池阻塞主页面的onload是这两个问题中最影响性能的方面.一般都是想让onload时间越早触发越好,一方面是用户体验过更重要的是google给网站的加载速度的

iframe用法总结

通过分析iframe和无阻塞脚本关系能让我们更懂iframe

在我上篇文章里,我提到一种使用iframe完成无阻塞脚本加载的方式,因为我对iframe的偏见很大,所以上篇文章里我没有展开讨论这个问题. 文章发表后有位网友问了我这样一个问题,下面是他问题的原文,如下所示: 我一个电商后台系统,用的表格控件是flexigrid,,里面是个iframe来的,每一个tab就是一个iframe,现在遇到的问题就是,如果其中一个或者多个iframe在加载数据,还没加载完,如果这个时候,我再去开一个tab,也是查找数据,可能数据量很大,或者提交数据(其他的iframe可

[转]在ASP.NET开发中容易忽略的2个小问题 Cookie乱码存取异常和 iframe弹框的login跳转

本文转自:http://www.cnblogs.com/outtamyhead/p/3642729.html 本文地址:http://www.cnblogs.com/outtamyhead/p/3642729.html,转载需保留本地址. 最近在我的MVC项目中出现了两个非常小,但是往往惹出大麻烦的问题,借中午的时间在这里记录一下. 一:在本地调试环境下能够正常读取Cookie,但发布到IIS中就不能读取,报空指针异常. 二:由于使用的是Iframe框架,同时也加入了session超时重新登录的

如何获取Iframe的页面控件的值

有时候我们在页面需要使用iframe的方法来引用另一个页面,虽然个人建议不要使用iframe哈,但是有些时候是没得法了才使用的咯,那么在使用的过程中也会遇到某一些问题,我将自己遇到的问题记录下来方便以后的朋友在遇到了此问题少走弯路!!! 假如我首页index.hmtl使用了iframe引用了child.html页面代码如下: <div> <div class="panel panel-default"> <div> <div class=&qu

使用postMesssage()实现跨域iframe页面间的信息传递----转载

由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参简单说来就是把所有需要传递的参数加到与主页面同源的url上,将子页面重定向到该url,然后主页面通过iframe的src获取这些参数过程非常复杂,不建议使用这种方法 2. postMessage() postMesssage()是HTML5提供的一个基于事件的消息传输API,可以实现跨文本档.多窗

iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求.当内容是未知或者是变化的时候.这个时候又有几种情况了. iframe内容未知,高度可预测这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度.常用的兼容代码有: // document.domain = "caib

html之小积累-.-iframe自适应高度

在做系统框架的时候,常常会用到iframe,当需求是iframe不能出现纵向滚动条,需要根据加载页面的高度,一致延伸,但是iframe的高度自适应问题比较麻烦,当时也是纠结了好久. 方案1:当遇到iframe里面嵌套的页面(后面简称内页),内页的高度不会变化,就是只是第一次加载的时候需要自适应的话,只要设置iframe就行了,兼容ie6+.谷歌. eg:<iframe src="<c:url value='/role/edit.do'/>" id="ifra

velocity模板使用建议

复杂页面前端模块化的方式: 方式一:iframe 方式二:velocity模板(#parse) 方式一,优点很多,也有缺点,例如页面之间传递参数等: 方式二,页面之间的调用,传参更容易,页面性能更好:但是也有一些缺点,如样式互相影响,js之间调用混乱等: 就方式二的建议如下: 1.css样式,少用或者不用全局样式: 2.模块之间尽量不要进行调用,除非一个模块完全属于另外一个模块: 3.模块之间的方法调用,或者模块调用主窗口的js函数,通过主窗口的全局事件(window)处理: 举例如下: 场景:

解决父类加载iframe，src参数过大导致加载失败

原文:解决父类加载iframe,src参数过大导致加载失败 <iframe src="*******.do?param=****" id="leftFrame" name="leftFrame" frameborder="0"></iframe> 或者是使用js加载src: var params = "?pk_id="+pk_id; var frameLeftSrc = "

不建议使用iframe

热门专题