`
xyh
  • 浏览: 85279 次
  • 性别: Icon_minigender_1
  • 来自: China
社区版块
存档分类
最新评论

Iframe总结

    博客分类:
  • Java
阅读更多

如果一个页面的iframe太多,会造成什么样的后果呢

如下面的页面index.html

      
  1. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  2. < head >   
  3. < title > test title >   
  4. < style   type = "text/css" >   
  5. <!-- -->
  6. body {   
  7. margin: 0px;   
  8. }   
  9. -- >   
  10. style >   
  11. head >   
  12. < body >   
  13. < center >   
  14. < iframe   src = "/include/topMenu_sz.jsp"   width = "1000"   height = "130"   scrolling = "no"   frameborder = "0"   noresize = "noresize"   id = "topFrame" ></ iframe >          
  15.   
  16. < iframe   src = "/include/midder.jsp"   width = "1000"   height = "460"   scrolling = "no"   frameborder = "0"   noresize = "noresize"   id = "midder" ></ iframe >               
  17.                  
  18. < iframe   src = "/include/bottom.jsp"   scrolling = "no"   frameborder = "0"   width = "1000"   height = "20"   noresize = "noresize"   id = "bottom" ></ iframe >     
  19. </center >   
  20. </body >   
  21. </html >   

而其中的第二个iframe,即 midder.jsp包含另外两个iframe.

  1. < table   width = "1000"   border = "0"   align = "center"   cellpadding = "0"   cellspacing = "0" >   
  2.    < tr >   
  3.     < td   width = "375"    valign = "top"   id = "leftTD" > < iframe   id = "left"   width = "385"   height = "458"   src = "/left.jsp"   frameborder = "0"   scrolling = "no"   id = "left"  noresize ></ iframe ></ td >   
  4.     < td   width = "620"   valign = "top"   id = "mapAreaTD" > < iframe   width = "620"    height = "458"   id = "mapArea"   src = "/area.jsp"    frameborder = "0"   scrolling = "no"  noresize ></ iframe ></ td >   
  5.  </ tr >   
  6. </table >   

而left.jsp又包含另外一个iframe,content.jsp

每次加载这个页面的时候都不是从上面开始加载的,从midder.jsp这个页面加载的

这样做虽然麻烦,但便于维护和修改

相对来说,Iframe主要用在以下几个地方:

1.文件无刷新上传

2.广告位,Iframe方式不影响页面加载,当然也可以用AJAX方式,但脚本代码的加载是阻塞式的

3.很多管理员后台,布局采用Iframe方式

 

分享到:
评论
2 楼 xiebaolong 2010-04-28  
是啊,又一年过去了,他一定会对我们的速度有所影响,可是我们怎么才能让我们的页面加载完之后再加载iframe呢?
1 楼 xyh 2009-01-14  
过去一年了,俺终于自己知道了答案:
一个页面请求过多会影响它的速度,每个请求都会消耗资源。

相关推荐

    iframe跨域常用问题和iframe页面自适应

    在网页开发中,`iframe`...总结,理解和掌握`iframe`的跨域解决方案以及自适应策略,对于开发高效且用户体验良好的Web应用至关重要。在实际应用中,还需要注意安全性、性能优化等问题,以提供更优质的网页服务。

    iframe对另一个iframe控制的Demo

    总结来说,这个实例涉及了以下关键知识点: 1. HTML的`iframe`标签及其`src`属性。 2. JavaScript/jQuery对iframe内容的访问和操作。 3. 使用JavaScript改变DOM元素的样式,如隐藏和显示iframe。 4. JSP中嵌入...

    iframe里无右键菜单

    总结来说,禁用`iframe`内的右键菜单主要涉及`iframe`元素的选择和`contextmenu`事件的监听与处理。通过JavaScript的事件监听和事件处理函数,我们可以轻松实现这一功能,提供更安全、可控的用户体验。

    div被iframe遮住的几种情况及解决方法

    总结起来,解决DIV被IFRAME遮挡的方法有多种,从调整DIV的CSS样式,到调整IFRAME元素本身的属性,再到通过参数控制IFRAME的显示方式,都可以尝试。当然,在设计页面布局时,建议尽量避免复杂的层次结构,并且注意...

    iframe框架的多种刷新方法总结

    适合用于iframe框架集的几种页面刷新方法,局部刷新,动态刷新, window.location.herf的刷新方式

    js处理iframe的系列问题

    ### 总结 通过对上述知识点的学习,我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题,包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来...

    iframe框架\JS获取iframe元素

    #### 六、总结 通过对`iframe`元素及其内部内容的操作,我们可以实现许多高级功能,如动态加载外部资源、构建复杂的用户界面等。然而,在实际应用中需要注意不同浏览器之间的兼容性差异,以及潜在的安全问题。通过...

    iframe自适应高度和宽度

    #### 六、总结 本文详细介绍了如何实现`iframe`的高度和宽度自适应,包括基本原理、示例代码以及解决兼容性问题的方法。通过这些技术,可以使`iframe`更加灵活地适应不同的内容变化,提高用户体验。在实际应用中,...

    iframe中页面显示不全1

    总结一下,解决"Iframe中页面显示不全"的问题,需要关注以下几点: 1. 确保`&lt;iframe&gt;`的`width`和`height`属性设置正确,至少应与嵌入内容的尺寸相匹配。 2. 在`&lt;div&gt;`中嵌套`&lt;iframe&gt;`时,调整`&lt;div&gt;`的尺寸以容纳`...

    iframe自适应高度js demo

    总结一下,实现`iframe`自适应高度的关键在于: 1. 使用JavaScript动态获取`iframe`内容的`scrollHeight`。 2. 在`iframe`的`onload`事件中调用更新高度的函数。 3. 跨域情况下,利用`postMessage`和`message`事件...

    JQUERY实现iframe页面切换功能

    总结,通过以上步骤,我们可以利用jQuery轻松实现iframe页面的切换功能。这种方法不仅可以提供灵活的内容展示,还可以优化页面性能,因为只需要加载用户当前关注的内容。在实际项目中,可以根据需要进行调整,例如...

    使用iframe在网页中嵌入其他网页的方法

    总结来说,`iframe`是一个强大的网页设计元素,它可以方便地将其他网页内容嵌入到当前页面中,通过调整其属性,可以实现定制化的展示效果。然而,在使用`iframe`时,也需要考虑到潜在的技术限制和用户体验因素。对于...

    iframe根据页面内容自适应高度和宽度

    总结来说,实现`iframe`根据页面内容自适应高度和宽度,可以通过CSS、JavaScript以及第三方库如`iframe-resizer`来完成。不同的方法适用于不同的场景,开发者可以根据实际需求选择合适的方式。在处理跨域问题时,第...

    完美解决iframe跨域问题

    总结,通过理解iframe跨域问题的本质以及各种解决方案,我们可以根据实际需求选择合适的策略。`window.name`跨域通信虽然存在一定的局限性,但在某些场景下能提供一种实用的跨域数据传递手段。在实际开发中,结合...

    js 实现iframe 之间传值

    总结,JavaScript提供了多种在`iframe`之间传递值的方法,包括`postMessage()`、`window.name`、`location.hash`、Web存储API以及`window.parent`和`window.frames`。选择哪种方法取决于具体的需求,如是否跨域、...

    iframe弹出窗

    总结,"iframe弹出窗"是一种利用`iframe`和自定义`div`对话框来实现的交互方式,它提供了在主页面上无缝展示外部内容的功能。通过合理的CSS布局和JavaScript控制,我们可以创建出符合需求、用户体验良好的弹出窗口。

    动态创建iframe,并动态添加js执行代码

    总结来说,动态创建iframe并动态添加js执行代码是Web开发中的重要技术,它能够帮助我们实现异步加载、跨域通信等功能,但同时也需要注意相关的安全问题。通过熟练掌握这些技术,开发者能够构建更复杂、更灵活的Web...

    嵌入到HTML的iframe自动适应大小

    ### 总结与扩展 通过上述分析,我们可以看到“嵌入到HTML的iframe自动适应大小”这一知识点涉及到了HTML、CSS和JavaScript的综合运用,尤其是在处理不同浏览器的兼容性问题时显得尤为重要。在实际项目中,还需要...

    实现iframe嵌套,适合CMS,CRM等后台框架

    在IT行业中,iframe(内联框架)是...总结来说,iframe是构建后台管理框架的强大工具,能够提高用户体验,简化页面导航。通过掌握iframe的使用技巧,结合现代前端技术,我们可以创建出更加智能化和用户友好的后台应用。

    ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

    总结起来,解决iOS系统中`iframe`不兼容问题的关键在于识别用户设备并采取相应的处理策略。在Android设备上使用`iframe`,而在iOS设备上选择页面跳转,可以有效避免因`iframe`高度计算和弹框定位问题引发的用户体验...

Global site tag (gtag.js) - Google Analytics