V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Aidea
V2EX  ›  程序员

有没有不刷新页面加载复杂 div 的方法?

  •  
  •   Aidea · 2019-09-01 15:23:44 +08:00 via Android · 3416 次点击
    这是一个创建于 1936 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如打开用户中心,不使用新窗口,也不刷新当前页面,而是以弹出 modal 框的方式显示,但是这个页面的内容不想提前写在当前页。
    如果是将用户中心的内容单独写在一个 html 文件里,有没有什么技术能够将这个单独 html 的内容动态插入到当前的页面呢?排除 iframe,谢谢
    21 条回复    2019-09-02 11:45:46 +08:00
    251243021
        1
    251243021  
       2019-09-01 15:27:41 +08:00   ❤️ 1
    发送个异步请求.然后把请求内容插入?
    hoyixi
        2
    hoyixi  
       2019-09-01 15:27:59 +08:00   ❤️ 1
    Ajax 获取(数据形式是 html 还是 json 还是 xml 等等,随你开心),然后插入当前页面某个地方还是 modal,想怎么展示就怎么展示( javascript 操作 DOM )
    Aidea
        3
    Aidea  
    OP
       2019-09-01 15:37:41 +08:00 via Android
    @251243021
    @hoyixi
    这种方式可行是可行,但是要插入的页面结构复杂,包括相关的样式和脚本,而且这样的页面有很多个,这么做的话维护起来很麻烦
    codehz
        4
    codehz  
       2019-09-01 15:41:26 +08:00   ❤️ 1
    最简单的方法:HTML Modules ( https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md )
    问题在于他还在草案阶段)
    现在能用的方法: 手工 fetch,然后直接 set HTML )
    还能把 HTML 转换为一堆 document.createElement 的 js 然后直接加载)
    不过其实如果用了某些主流前端框架的话,这个应该就不是什么问题了)
    molvqingtai
        5
    molvqingtai  
       2019-09-01 15:42:01 +08:00 via Android   ❤️ 1
    配合 webpack 使用 import ( )
    hoyixi
        6
    hoyixi  
       2019-09-01 15:43:18 +08:00   ❤️ 1
    @Aidea #3 当然麻烦

    直接加载 html 是很久以前的做法,后来发展到加载纯数据然后使用 Mustache、Handlebars 之类的模板展示;再到现在,Vuejs/Reactjs 来了

    方法就是这个套路,本质都一样。用哪个、怎么用,看你具体问题灵活应用
    NCry
        7
    NCry  
       2019-09-01 16:01:51 +08:00   ❤️ 1
    我觉得 vue 或者 angular 等单页应用框架可以满足你的需求。
    TYchen
        8
    TYchen  
       2019-09-01 16:05:28 +08:00   ❤️ 1
    建议引入 vue.js 当做类库使用。 或者用 HTML 的 temple
    Aidea
        9
    Aidea  
    OP
       2019-09-01 18:55:38 +08:00 via Android
    @codehz
    @molvqingtai
    @hoyixi
    @NCry
    @TYchen
    感谢各位的回复,启发很大,谢谢!
    yamedie
        10
    yamedie  
       2019-09-01 19:05:11 +08:00
    如果由服务端返回 DOM, js 代码, CSS 样式, 可以参考服务端保存富文本由前端渲染的实现方法, 一个 jQuery 的.html()就足够用了, 后台通过接口返一个 div 标签的长文本, div 标签里也可以放 script 标签和 style 标签的
    galikeoy
        11
    galikeoy  
       2019-09-01 19:25:40 +08:00
    @yamedie #10 直接 ajax 请求 html 文件也可以的吧,这样就不用后台返回了,拿到 html 也可以插啊
    zqx
        12
    zqx  
       2019-09-01 19:37:58 +08:00 via Android
    把用户中心改造成单页应用,打包发布到私有 npm
    在当前项目动态 import 组件,放到模态框显示
    beastk
        13
    beastk  
       2019-09-01 19:38:52 +08:00 via iPhone
    我反正是 ajax 请求,然后 modal
    ffeii
        14
    ffeii  
       2019-09-01 19:41:13 +08:00 via iPhone
    webpack 按需加载
    also24
        15
    also24  
       2019-09-01 19:49:59 +08:00 via Android
    第一反应就是 pjax
    Baymaxbowen
        16
    Baymaxbowen  
       2019-09-01 20:08:49 +08:00 via Android
    A 通过 ajax 然后 get 一个 HTML ? datatype 选择 HTML,结合 jQuery 会比较好用
    james122333
        17
    james122333  
       2019-09-01 22:29:43 +08:00
    原来我帮公司实现的有 pjax 的功能... 整个整套的... js 载入 css 清除通通有 看来我真的太佛心 薪水应该领高一点
    dartabe
        18
    dartabe  
       2019-09-02 03:05:23 +08:00
    模版引擎?
    demonzoo
        19
    demonzoo  
       2019-09-02 11:27:13 +08:00
    加载纯数据 json data,然后用模板工具生成 div 内容,或者再复杂一点的话用 vue
    zivyou
        20
    zivyou  
       2019-09-02 11:35:30 +08:00
    单页面应用了解一下。js 完成所有页面的渲染加载 当然这里面会有比较多的细节问题 前端开发领域已经总结了一整套完成的工具链和方法 框架+模版之类的 可以了解一下

    ps:为啥我一个 crud boy 会知道这个。。
    himesens
        21
    himesens  
       2019-09-02 11:45:46 +08:00
    pjax 完全符合,如果不想折腾或者引入其它东西的话就 ajax,最多就是烦,不复杂,
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3375 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:53 · PVG 19:53 · LAX 03:53 · JFK 06:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.