`
zy116494718
  • 浏览: 473100 次
  • 性别: 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`来实现图片的上传和无刷新展示,以及涉及...

    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`自适应其容器,以确保在不同屏幕尺寸和设备上保持良好的显示效果。 1. **`iframe`基本语法**: `...

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

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

    自己做的ASPNETAJAX-AjaxUpdatePanel_UpdateProgress控件例子

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

    内嵌框架案例

    这个技术在很多场合非常实用,比如展示第三方内容、实现页面局部刷新、创建多窗口布局等。在这个“内嵌框架案例”中,我们将深入探讨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来进行页面跳转的话页面的效果不怎么样,同时也无法进行局部刷新(即异步提交验证)。 于是,我开始...

    asp中AJAX简单应用.rar

    在ASP中结合AJAX(Asynchronous JavaScript and XML)技术,可以实现页面的无刷新更新,提升用户体验。AJAX的核心是JavaScript异步通信,它允许在不重新加载整个网页的情况下,与服务器交换数据并局部更新页面内容。...

    ajax_GreyBox_v5_5的DEMO

    Ajax的核心在于通过JavaScript在后台与服务器交换数据并局部更新页面,避免了整个页面的刷新。这使得用户界面更加流畅,提高了应用程序的响应速度。Ajax利用XMLHttpRequest对象作为与服务器通信的桥梁,同时利用DOM...

Global site tag (gtag.js) - Google Analytics