`
zy116494718
  • 浏览: 476876 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

iframe实现局部刷新例子

阅读更多

 

当页面有一部分是不变的或整个页面的图片很多时,使用局部刷新会是不错的选择。否则会极大地影响访问者页面下载体验感。

 

一种方法:

 

    <script type="text/javascript">
    $(function(){
   
    $("#a1").click(function(){

     var name= $(this).attr("name");
   
     $("#iframe").attr("src",name).ready();    
           
    })
   
    $("#a2").click(function(){
       
     var name= $(this).attr("name");
   
     $("#iframe").attr("src",name).ready();    
           
    })
        })
   
    </script>
     <a href="#" id="a1" name="a1.html">1</a>
     <a href="#" id="a2" name="a2.html">2</a>
     <iframe src="" id="iframe"></iframe>

 

    当点a1时在iframe里显示a1.html的内容,点a2时在iframe里显示a2.html的内容

 

另一种方法:

 

     <a href="a1.html" id="a1" name="a1.html" target="i">1</a>
     <a href="a2.html" id="a2" name="a2.html" target="i">2</a>
     <iframe src="" id="iframe" name="i"></iframe>

 

     ps: <from> 同样也有target属性,作用和<a>一样

           这个方式如果<from>或<a>提交到某个Action中再跳转到a1.html中效果一样,如果在Action中有req.set或session.set,最后在iframe中同样可以显示出来。

分享到:
评论

相关推荐

    iframe实现页面局部刷新操作

    `iframe`是一种HTML元素,它可以在一个网页中嵌入另一个网页,使得我们可以在独立的框架内加载和显示内容,从而实现局部刷新的效果。在本案例中,我们将讨论如何利用`iframe`来实现图片的上传和无刷新展示,以及涉及...

    iframe局部刷新.txt

    ### iframe局部刷新技术详解 #### 一、概述 在网页开发中,为了提高用户体验和页面加载效率,有时候我们需要实现页面的局部刷新功能。局部刷新是指只更新页面的一部分内容,而不是整个页面重新加载。这种方式可以...

    PHP网站使用JavaScript和Iframe简单实现部分刷新效果1

    总的来说,PHP结合JavaScript和Iframe可以有效地实现动态网站的局部刷新效果,提高用户体验。通过合理的页面布局,JavaScript的交互控制以及Iframe的动态内容加载,我们可以创建出响应用户操作、更新快速且界面流畅...

    拒绝Ajax,同样让你的网页局部刷新,异步递交

    本篇文章将探讨如何在不依赖Ajax的情况下,依然能够实现在网页上的局部刷新和异步数据递交。 首先,我们可以利用HTML5引入的`&lt;form&gt;`元素的新特性,如`formaction`和`formmethod`属性,来实现异步提交。这些属性...

    .net无刷新例子

    综上所述,".NET无刷新例子"通过Callback技术展示了在ASP.NET环境中实现无刷新更新页面部分的能力。这种技术极大地提升了Web应用的交互性和用户体验,使得用户可以在不等待整个页面刷新的情况下完成各种操作。在实际...

    二个iframe之间传值 的小例子

    `iframe`常用于实现页面的分层展示、加载外部内容或者实现局部刷新等效果。当在一个页面内存在多个`iframe`时,有时我们需要在这些`iframe`之间传递数据或调用它们的JavaScript方法,以实现更复杂的交互功能。本篇...

    实现无刷新联动例子汇总

    iframe的无刷新其实是局部刷新,状态栏的滚动条还是会滚动,只是页面不会闪烁,这是一种比较老的技术了,在处理的数据两大的时候会比较慢,在本例中需要两个页面:index.aspx和frame.asapx,index.aspx用来显示界面,...

    iframe自适应高度和宽度

    它能够实现页面内部局部刷新的效果,广泛应用于各种复杂的网页布局中。然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`...

    iframe 自适应 实例

    `iframe`广泛应用于各种场景,如嵌入视频、地图、广告或者实现页面局部刷新等。本实例主要探讨的是如何使`iframe`自适应其容器,以确保在不同屏幕尺寸和设备上保持良好的显示效果。 1. **`iframe`基本语法**: `...

    JavaScript操作iframe父窗口和子窗口例子

    在Web应用程序中,iframe(Inline Frame)常用于嵌入其他网页或者实现页面的局部刷新,而父窗口与子窗口之间的通信则能实现更复杂的交互逻辑。 在JavaScript中,通过window对象我们可以访问到当前窗口的各种属性和...

    iframe 的刷新方式 这样方式更方便

    在这个例子中,`show_syslog`函数接收一个参数`id`,并将其附加到新的URL上,然后更新`iframe`的`location.href`,从而实现内容的刷新。 **注意事项** 当同时使用`document.fr.location.href`和`document.fr....

    javascript实现的网页局布刷新效果

    总的来说,这个例子展示了一个简单的局部刷新实现,利用`&lt;iframe&gt;`和JavaScript进行页面内容的切换。虽然不如Ajax常见和高效,但在某些情况下,特别是当需要加载整个HTML页面时,这种方式可能是可行的选择。在实际...

    自己做的ASPNETAJAX-AjaxUpdatePanel_UpdateProgress控件例子

    当触发更新时,它会发送一个异步请求到服务器,服务器处理请求并返回更新后的HTML片段,然后AjaxUpdatePanel将这些内容插入到页面的相应位置,从而实现页面的局部刷新。 【UpdateProgress控件】 在ASP.NET AJAX中,...

    js实现iframe框架取值的方法(兼容IE,firefox,chrome等)

    这使得开发者可以将不同页面的内容整合到同一个页面上,或者实现页面局部刷新等功能。然而,由于不同浏览器的实现方式略有差异,导致在JavaScript中获取`iframe`内的元素或值时可能会遇到兼容性问题。本文将详细讲解...

    内嵌框架案例

    这个技术在很多场合非常实用,比如展示第三方内容、实现页面局部刷新、创建多窗口布局等。在这个“内嵌框架案例”中,我们将深入探讨IFrame的工作原理,以及如何在实际项目中有效地运用它。 首先,IFrame的基本语法...

    js制作菜单页面

    它通常用于显示外部资源,如广告、地图或视频,也可以用于实现页面内的局部刷新,就像在这个菜单页面的例子中。通过将不同页面加载到IFrame中,我们可以实现单页面应用(SPA)的效果,让用户在不同的内容之间平滑...

    Java Web应用客户端编程JS经典事例

    `iframe`常用于加载外部资源,实现页面的局部刷新,或者用于创建多窗口环境。开发者可以通过`iframe`的`src`属性来指定要加载的URL,并可以通过`contentWindow`和`contentDocument`属性来访问和操作`iframe`内的内容...

    Asp.net AjaxDemo

    2. **UpdatePanel**:UpdatePanel是实现页面局部更新的关键组件。它创建了一个虚拟的IFrame,允许页面的部分内容在后台异步更新,而无需刷新整个页面。 3. **Timer控件**:与UpdatePanel结合使用,可以定期触发更新...

    Ajax与隐藏帧技术

    这种技术的核心在于JavaScript,通过创建XMLHttpRequest对象来异步地与服务器进行通信,实现了页面的无刷新更新,提高了用户体验。 在Ajax的应用中,通常有以下几个关键组成部分: 1. **XMLHttpRequest对象**:这...

    SSH+Jquery+Ajax框架整合

    近期学习了SSH2(Struts2+Spring+Hibernate)的整合后,开始尝试的写一个登陆界面,结果发现:若是单单使用struts2来进行页面跳转的话页面的效果不怎么样,同时也无法进行局部刷新(即异步提交验证)。 于是,我开始...

Global site tag (gtag.js) - Google Analytics