V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Syaoran
V2EX  ›  问与答

静态页面能实现不重载刷新么…有木有黑科技或折中方案(看着像就行)

  •  
  •   Syaoran · 2015-06-05 22:42:21 +08:00 via iPhone · 2685 次点击
    这是一个创建于 3255 天前的主题,其中的信息可能已经有所发展或是发生改变。
    不重载刷新大概就是像Gmail页面,或者G+的瀑布流吧,我不知道专业名词应该叫什么,查了下ajax貌似能实现但是貌似是动态的,所以想问问静态页面能否实现这样的效果,大体上就是:
    1、点开一个链接不会有明显的加载过程(屏幕全白)
    2、能自动加载出更多的内容(大概就是所谓瀑布流)
    3、页面的跳转过程能有动态效果(比如像Gmail的彩色翻页小圆点,又如Youtube加载过程中页面顶部的红色进度条)
    4、纯静态,html
    18 条回复    2015-06-06 13:26:08 +08:00
    JimmyCai
        1
    JimmyCai  
       2015-06-05 22:45:52 +08:00
    你说的不就是AJAX么
    kozora
        2
    kozora  
       2015-06-05 22:46:27 +08:00
    ajax啊。。
    Syaoran
        3
    Syaoran  
    OP
       2015-06-05 22:49:07 +08:00 via iPhone
    @JimmyCai
    @kozora 静态页面也能使用么…关于ajax我是小白诶。搜索不到在静态页面使用的相关实例…
    JimmyCai
        4
    JimmyCai  
       2015-06-05 22:50:04 +08:00
    @Syaoran 静态页面不是应该更简单么...动态还要纠结怎么输出
    phy25
        5
    phy25  
       2015-06-05 22:51:18 +08:00
    Ajax 抓静态或者动态内容都行的。不过觉得这里你需要着重处理的是 Ajax 进来的页面的 CSS 和 JS 重复加载问题……
    luo123qiu
        6
    luo123qiu  
       2015-06-05 22:52:08 +08:00
    想起多年前,还不懂ajax的时候,用iframe模拟过ajax效果。
    代码:
    <a href="xxx.html" target="xxx">打开另一个页面</a>
    <iframe name="xxx"></iframe>

    有局限性,慢慢玩吧。。
    yakczh
        7
    yakczh  
       2015-06-05 22:52:26 +08:00
    react
    luo123qiu
        8
    luo123qiu  
       2015-06-05 22:55:40 +08:00
    @Syaoran 主要就是利用a标签的target属性,在iframe里打开别的页面,实现局部刷新。自己玩玩还行,实际项目中还是别用这种方法了吧,挺2的。。。。再说10年前的东西不好玩啊。。
    banri
        9
    banri  
       2015-06-05 23:05:43 +08:00
    纯静态……是不是不用读取后端数据?那就不用Ajax啊……
    这不就是简单的DOM操作么...
    cloverstd
        10
    cloverstd  
       2015-06-05 23:06:14 +08:00
    AngularJS ngRoute
    jruif
        11
    jruif  
       2015-06-05 23:11:09 +08:00
    @cloverstd 这个方法可以,不过我觉得成本太大,只是伪装下,可以使用一个比较笨的办法,使用setInterval来不断ajax请求数据,数据返回后替换原来的数据,可实现你的需求。
    jruif
        12
    jruif  
       2015-06-05 23:13:29 +08:00
    @jruif 额。。。没注意看你的需求,sorry,请折叠。。。
    Syaoran
        13
    Syaoran  
    OP
       2015-06-05 23:25:45 +08:00 via iPhone
    @banri 谢谢…啊的确DOM就行了…不过那个…怎么添加动态效果(第三条
    046569
        14
    046569  
       2015-06-05 23:28:25 +08:00
    LZ 可以围观下我博客,大体上实现了你要求的效果.
    打开开发者工具你就明白了...
    banri
        15
    banri  
       2015-06-05 23:40:04 +08:00
    @Syaoran JS和CSS都可以实现
    简单的办法就是把过度效果写进CSS 然后用JS添加样式就行了
    Syaoran
        16
    Syaoran  
    OP
       2015-06-05 23:54:20 +08:00 via iPhone
    @046569 Turbolinks.js?貌似要大量改动已有的html以实现?不过效果很好


    @banri DOM操作需要大量改动已有的html么?
    kozora
        17
    kozora  
       2015-06-06 02:51:56 +08:00
    bruce55
        18
    bruce55  
       2015-06-06 13:26:08 +08:00
    就ajax加载,然后把dom的innerHTML替换掉就行了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2564 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:43 · PVG 20:43 · LAX 05:43 · JFK 08:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.