那些前端面试问 iframe 优缺点的是不是应该马上逃离? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
DyingSwan
V2EX    程序员

那些前端面试问 iframe 优缺点的是不是应该马上逃离?

  •  1
     
  • &bsp; DyingSwan 2021-02-05 11:27:47 +08:00 11392 次点击
    这是一个创建于 1707 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题 感觉进去了可能就是 维护老项目了 像是要回到 jquery 的时代了

    95 条回复    2024-04-15 21:51:22 +08:00
    a62527776a
        1
    a62527776a  
       2021-02-05 11:29:02 +08:00   2
    就说不知道
    christin
        2
    christin  
       2021-02-05 11:29:22 +08:00 via iPhone
    不一定吧 之前一个字节的面试也问这个了 可能考察基本功
    a87586179
        3
    a87586179  
       2021-02-05 11:36:58 +08:00
    iframe 是 H5 才支持的,哪里老了
    Pastsong
        4
    Pastsong  
       2021-02-05 11:37:34 +08:00
    现在最流行的微前端可是用 iframe 实现的哦(一种方案)
    airfling
        5
    airfling  
       2021-02-05 11:42:09 +08:00
    jquery 其实也没啥不好
    morethansean
        6
    morethansean  
       2021-02-05 11:44:57 +08:00   8
    又不是让你适配 IE6,复杂业务场景里面 iframe 是再常见得不过的解决方案了,倒是好奇你为什么觉得 iframe 是一种类似 jquery 的遗留技术? jquery 是因为 web 应用场景的变化再加上更优秀的替代品,那面试官反问一句一般 iframe 都用在什么场景?不用 iframe 是现在有了什么更好的方案解决了这些场景问题?
    llb123
        7
    llb123  
       2021-02-05 11:52:35 +08:00
    ls + 1
    musi
        8
    musi  
       2021-02-05 12:20:36 +08:00 via iPhone
    现在有很多场景都是 iframe 吧? iframe 也是微前端的一种方案,某些网站登录也都是 iframe,怎么就老项目了?也没有最佳实践说不用 iframe 吧? lz 真的是做前端的么。。。
    JoStar
        9
    JoStar  
       2021-02-05 12:22:54 +08:00
    最近微前端还算热门,讨论这个就势必会扯到 iframe,很正常。
    yulitian888
        10
    yulitian888  
       2021-02-05 12:33:31 +08:00   4
    @a87586179 怕不是打算笑死大家?二十年前我用 IE 4的时候就已经在写Iframe了好吧
    yulitian888
        11
    yulitian888  
       2021-02-05 12:38:08 +08:00   2
    正经说一下楼主的问题,赶紧逃吧!
    倒不是因为这个知识点有什么历史问题,而是这个问题的问法大有问题。
    如果是我的团队确实需要用iframe,我会选择这样问:“在xxx场景下,需要处理yyy问题,你觉得可选的方式有哪些?”、或者是“现有一个iframe,实现xxx效果。期待加上yyy效果时怎么做”
    区别在哪儿呢?
    问优缺点这种说辞,太像培训班老师做的事情了。招聘团队的实际情况极可能比技术陈旧更糟糕。
    iugo
        12
    iugo  
       2021-02-05 12:40:47 +08:00
    微前端? 这不是 2019 年的话题吗?

    我记得 React 开发者还专门发推 “嘲讽” 来着 https://twitter.com/dan_abramov/status/1132493678730252288 (当然, 一方面不是真的嘲讽只是发表看法, 另一方面, Dan 肯定希望大家统一都用 React 啊)
    ericgui
        13
    ericgui  
       2021-02-05 12:43:38 +08:00
    iframe 有自己的优点,在有些情境下非常有用
    jiangshanmeta
        14
    jiangshanmeta  
       2021-02-05 12:47:18 +08:00
    楼上说微前端用 iframe 的 上次听这种方式把不同项目合在一起的时候拜占庭才灭亡没多久
    KuroNekoFan
        15
    KuroNekoFan  
       2021-02-05 12:48:29 +08:00 via iPhone
    用 iframe 一般是因为前期规划的比较烂,又没有迁移的实际方案
    说快逃我觉得没毛病
    Martox
        16
    Martox  
       2021-02-05 12:50:13 +08:00
    hh 上面一堆说快逃,有点笑到我了。
    veike
        17
    veike  
       2021-02-05 12:50:56 +08:00 via Android
    视频分享播放用的就是 iframe
    rodrick
        18
    rodrick  
       2021-02-05 12:51:17 +08:00
    所以有哪些优缺点? SEO 不友好,阻塞 onload,可以 postmessage 跨域交互?
    ETiV
        19
    ETiV  
       2021-02-05 13:19:16 +08:00
    是不会 jQuery 才这么怕的吗?
    musi
        20
    musi  
       2021-02-05 13:20:15 +08:00
    @iugo React 开发者当然希望 React 一统天下,毕竟直接和他利益相关,可事实是不管有什么乱七八糟的原因,前端的技术栈一直是多种多样的,毕竟前端娱乐圈的称号可不是白叫的
    hahastudio
        21
    hahastudio  
       2021-02-05 13:25:12 +08:00
    那完了,AWS Twitter Facebook 都有用到 iframe
    虽然我也觉得国内的公司用 iframe 的多半有坑,但一棍子打死 iframe 也不是什么好想法
    arslion
        22
    arslion  
       2021-02-05 13:32:55 +08:00
    碰见过让我背 ES5 的
    kinghly
        23
    kinghly  
       2021-02-05 13:39:38 +08:00 via Android
    老实讲,去哪都会有屎坑的
    Keyblade
        24
    Keyblade  
       2021-02-05 13:39:45 +08:00
    @a87586179 #3 最恐怖的是说这话的人做前端快四年了
    qqai
        25
    qqai  
       2021-02-05 13:47:06 +08:00
    项目用啥到无所谓,写出优雅的代码才是工程师重要的技能
    xrr2016
        26
    xrr2016  
       2021-02-05 13:50:12 +08:00
    iframe 不就是一个 HTML 元素嘛为什么要逃,少见多怪?
    KuroNekoFan
        27
    KuroNekoFan  
       2021-02-05 13:51:38 +08:00 via iPhone
    @qqai 是这样,然后常规业务代码如果用了 iframe,一定不优雅
    就好比我写 react,一个劲的导出方法给父组件
    xudong
        28
    xudong  
       2021-02-05 14:00:04 +08:00 via iPhone   1
    iframe 也是有很多优势的,可以看下 zoid 这个库。PayPal 的支付按钮就是用这个做的,特别适合需要嵌入到页面上的通用挂件开发,隔离 JS 运行环境,防止样式冲突。
    hbolive
        29
    hbolive  
       2021-02-05 14:15:12 +08:00
    我搽,看你们摆出这么多高大上术语,吓得我赶紧又去查了一下啥叫 iframe 。。
    no1xsyzy
        30
    no1xsyzy  
       2021-02-05 14:21:56 +08:00   2
    @a87586179 好吓人哦 https://www.w3.org/TR/html401/present/frames.html#h-16.5
    @hahastudio 补充:那完了,V2 放 youtube 链接会出 iframe,快别用 V2 了(



    我相信老项目用的该是 frameset (
    这种模式下,甚至没有 <body>,<html><head>...</head><frameset>...</frameset></html>
    不然你以为为什么有 <body> 标签?直接放 <html> 里面不香吗?<head> 里面的东西不都是默认没有显示能力的吗?
    zhuweiyou
        31
    zhuweiyou  
       2021-02-05 14:31:40 +08:00
    先搞清楚 frame 和 iframe 再来提问
    lovecy
        32
    lovecy  
       2021-02-05 14:34:18 +08:00
    @no1xsyzy 没错,真正的老项目都是 frameset,rows="50,*",这种语法
    LiuJiang
        33
    LiuJiang  
       2021-02-05 14:38:08 +08:00
    不一定,看项目模式,我司现在技术栈 react + mobx + antd,也有很多项目用 iframe 嵌在主应用上。
    SakuraKuma
        34
    SakuraKuma  
       2021-02-05 14:38:14 +08:00
    前阵子才在外包看见 frameset 。。。
    iframe 挺常用的,问题不大
    finalwave
        35
    finalwave  
       2021-02-05 14:44:05 +08:00
    iframe 又不是不能用。JD 上写面试会问 ie7 某个特性的公司才离谱呢,真有傻子会上当吗。
    zzsyq1009
        36
    zzsyq1009  
       2021-02-05 15:10:10 +08:00
    看业务场景 某些功能 iframe 会很有优势
    wee911
        37
    wee911  
       2021-02-05 15:35:30 +08:00
    你这种水平就应该赶紧滚
    wee911
        38
    wee911  
       2021-02-05 15:36:05 +08:00
    前端大多数水平确实低
    luruitao
        39
    luruitao  
       2021-02-05 15:38:51 +08:00
    iframe 场景非常多,并不是一个过时的技术。
    Elethom
        40
    Elethom  
       2021-02-05 15:39:13 +08:00 via iPhone
    能发出这种主题可能确实不太适合这个岗位。
    danhahaha
        41
    danhahaha  
       2021-02-05 15:54:01 +08:00
    iframe 可是神器,不管什么陈年老项目,套进去就 ok,尤其给那些小白又自以为是的老板看最合适了
    alexfarm
        42
    alexfarm  
       2021-02-05 16:00:58 +08:00
    之前做了一个页面搭建工具,被各种业务系统 iframe 嵌入。能实现业务价值,技术其实并不重要
    tangzui
        43
    tangzui  
       2021-02-05 16:04:07 +08:00
    iframe 为啥不能用
    connection
        44
    connection  
       2021-02-05 16:11:56 +08:00
    我觉得其实没问题。因为它确实能低成本地解决一些问题。
    xuhai951753
        45
    xuhai951753  
       2021-02-05 16:14:49 +08:00   1
    iframe 很常用啊。尤其是跨系统的功能组合的时候。
    wxw752
        46
    wxw752  
       2021-02-05 16:19:08 +08:00
    前天刚用了 iframe
    sbmzhcn
        47
    sbmzhcn  
       2021-02-05 16:23:26 +08:00
    我见到的在线聊天商务通代码都会使用 iframe,防止样式干扰等。
    jymsy
        48
    jymsy  
       2021-02-05 16:34:57 +08:00
    用过 codesandbox 么?
    a87586179
        49
    a87586179  
       2021-02-05 16:39:30 +08:00
    @no1xsyzy 请你搞清楚 frame 和 iframe 再跟我聊
    a87586179
        50
    a87586179  
       2021-02-05 16:40:02 +08:00
    @yulitian888 请你搞清楚 frame 和 iframe 再跟我聊
    thtznet
        51
    thtznet  
       2021-02-05 16:46:15 +08:00
    作为一个写过 COM 组件的程序员,我说一个 IT 业界的实际情况:创新的难度其实小于兼容老项目保证业务不中断的情况下进行平滑过渡的难度,可以参考下业界兼容性最牛逼的操作系统。
    young1lin
        52
    young1lin  
       2021-02-05 16:50:46 +08:00
    作为一个后端,我觉得 jQuery 没什么不好啊(当然只是作为后端认为),而且 iframe 不是“新”东西吗? Youtube 的复制嵌入信息都是 iframe 呢。
    yulitian888
        53
    yulitian888  
       2021-02-05 16:54:46 +08:00   1
    @a87586179 好霸气!楼主提了 frame ?你提了 frame ?我提了 frame ?
    石头里蹦出个 frame 就来杠?
    再说了,我也没打算跟你聊啊~~~~
    我就想笑,不行吗?
    boringdays2015
        54
    boringdays2015  
       2021-02-05 16:58:15 +08:00
    @young1lin jq ?复制粘贴一时爽,后期维护火葬场
    a87586179
        55
    a87586179  
       2021-02-05 17:00:26 +08:00   1
    @yulitian888 哎,楼主明显连 frame 和 iframe 都没搞清楚啊..不打算和你杠
    a87586179
        56
    a87586179  
       2021-02-05 17:03:21 +08:00
    @yulitian888 他想的估计是 frameset 这种老语法
    dremy
        57
    dremy  
       2021-02-05 17:09:24 +08:00 via iPhone
    iframe 能做 dom/js/css 环境隔离,足以满足微前端 /微应用的基本要求
    zhaol
        58
    zhaol  
       2021-02-05 17:28:33 +08:00
    把不同的框架的代码整合到一个系统,用 iframe 不是很好用吗?
    seki
        59
    seki  
       2021-02-05 17:39:37 +08:00
    iframe 在很多地方还是有需要的,比如对于安全标准很高的场景,没有办法跨域的话就只能 iframe 了
    catch
        60
    catch  
       2021-02-05 17:40:32 +08:00
    月薪给够+年终有 6~10 个月,随便你多烂多老的项目,我照样混
    rioshikelong121
        61
    rioshikelong121  
       2021-02-05 18:12:53 +08:00
    iframe 其实玩法很多的。。
    rioshikelong121
        62
    rioshikelong121  
       2021-02-05 18:13:54 +08:00
    尤其是各种系统集成的时候,当然也是微前端的一种实现方案。
    yulitian888
        63
    yulitian888  
       2021-02-05 18:36:12 +08:00
    @a87586179 大家快来乐呵乐呵啊!现已加入“我比楼主更懂楼主”大礼包,抓紧乐呵哦!
    young1lin
        64
    young1lin  
       2021-02-05 19:34:13 +08:00
    @boringdays2015 没有啊,我之前第一份工作就是用 MiniUI,用 jQuery 包装的,那个其实算是组件化开发了,代码少,很多东西都是二次渲染的,也是 jQuery 语法,适合做表格的页面。
    hantsy
        65
    hantsy  
       2021-02-05 20:01:13 +08:00
    YT, SoundCloud 等 API 不是使用 Iframe 吗?除了这个方面,其他应该少见。
    learningman
        66
    learningman  
       2021-02-05 20:27:43 +08:00
    @xudong 对啊,也只有这种要到处贴的需要 iframe,实际上要不是浏览器支持,svg 更适合做这个,svg 里面也能写 html 写 css 的
    DualWield
        67
    DualWield  
       2021-02-05 20:30:05 +08:00
    iframe 的功能挺强大的,有很多你没有见过的业务场景,可以用 iframe 来完成。你没见过,不代表用 iframe 就有问题
    sucai
        68
    sucai  
       2021-02-05 20:33:04 +08:00
    @wee911 上来就是骂,你这水平和素质属实挺高,已 block
    billlee
        69
    billlee  
       2021-02-05 21:17:31 +08:00
    @yulitian888 #11 问优缺点也有可能是面试官水平不行,我以前也问过类似的问题,就是不知道要说什么,快聊不下去了。。
    no1xsyzy
        70
    no1xsyzy  
       2021-02-06 00:24:49 +08:00
    @a87586179 你不看下链接吗?
    HTML4.01 标准里就有 iframe 啊?

    不管楼主怎么想、是不是误解,你觉得 “iframe 是 H5 才支持的,哪里老了” 正确?幽默?嘲讽?哪个?
    phithon
        71
    phithon  
       2021-02-06 01:40:52 +08:00
    其他优点不知道,但是 iframe 构造的沙箱是很有用的,这个属性也是 HTML5 才有的。不要有偏见。
    Chingim
        72
    Chingim  
       2021-02-06 01:46:00 +08:00 via iPhone
    没遇到一定复杂的系统,是不会知道 iframe 的好处的
    Chingim
        73
    Chingim  
       2021-02-06 01:54:43 +08:00 via iPhone
    iframe 特别适合搞动态下发的东西
    akira
        74
    akira  
       2021-02-06 02:16:07 +08:00
    iframe 有啥缺点是要逃么
    GG668v26Fd55CP5W
        75
    GG668v26Fd55CP5W  
       2021-02-06 07:39:05 +08:00 via iPhone   1
    这有什么问题,互联网最赚钱的项目广告大多数就是用 iframe 嵌套进来的
    a87586179
        76
    a87586179  
       2021-02-06 07:40:08 +08:00
    @no1xsyzy 我看到了,抱歉我的错,技术太拉跨了。。
    DT27
        77
    DT27  
       2021-02-06 10:00:54 +08:00
    真的希望前端界能安宁点。。。
    zhangjiafan
        78
    zhangjiafan  
       2021-02-06 10:06:10 +08:00
    啥都不说,就问一句,如果你要做一套 sdk,包含登陆支付,走的是自己域名。 提供给第三方使用,第三方使用的是自己的域名和 h5 游戏,不用 iframe,有什么其他更好的全适配解决方案?不要学了几个什么 vuexxxxxxxx 框架就把其他给忘了啊
    x86
        79
    x86  
       2021-02-06 10:07:00 +08:00 via iPhone   2
    前端娱乐圈又开始了
    tony1890
        80
    tony1890  
       2021-02-06 10:09:04 +08:00   2
    我们公司就是 壳 + iframe 的形式。

    一个登录壳管理 n 个子系统。你不可能把所有的子系统代码放一个项目里,所以只能用壳管理各个子系统和菜单。这样,不管是别人要用我们的子系统还是我们要添加别人的子系统都方便。

    子系统和壳之间通过 postMessage 进行通信。这样可以实现子系统 token 过期壳自动退出。
    rodrick
        81
    rodrick  
       2021-02-06 10:12:12 +08:00   1
    @Livid
    ↓莫名其妙喷人

    @wee911 #37 #38
    towry
        82
    towry  
       2021-02-06 11:27:08 +08:00
    人家问你技术问题,考验你的经验,思维能力。
    你们上升到是不是要维护老项目的问题上,真是牛逼。

    假如你有那个顾虑,可以在最后面直接问,不要不会答也不会问,那真是牛逼 坏了。
    drupal
        83
    drupal  
       2021-02-06 11:28:09 +08:00   1
    @catch 一个混字,就可以看出一个人的格局。你的能力有多大,自然收入就有多高,当你愿意进那公司,就意味着你已经接收那份待遇,至于后续个人能走多远,取决于你的 IQ 和 EQ 。
    送给你一个忠告:做事就是做人。
    drupal
        84
    drupal  
       2021-02-06 11:30:09 +08:00
    @towry 不错,态度端正。
    xrr2016
        85
    xrr2016  
       2021-02-06 11:33:03 +08:00   1
    @Livid #37 人身攻击
    Livid
        86
    Livid  
    MOD
    PRO
       2021-02-06 11:40:22 +08:00   1
    @rodrick 谢谢举报。那个乱喷的账号已经被 Deactivate 。
    catch
        87
    catch  
       2021-02-06 14:08:56 +08:00 via iPhone
    @drupal 你在这里装什么啊?
    catch
        88
    catch  
       2021-02-06 14:10:33 +08:00 via iPhone
    @drupal 你不会就是公司里的那种奋斗逼吧,奉劝各位离你这种人还是远点好。混都不能说了?哈哈
    tydl
        89
    tydl  
       2021-02-06 16:41:48 +08:00 via Android
    @Pastsong 有 h5 才有的?你不是行内人吧,这个标签我在上大学 2000 左右就学了
    i4color
        90
    i4color  
       2021-02-06 16:46:11 +08:00
    楼主做的系统肯定都很简单。所以才会这么想。
    tydl
        91
    tydl  
       2021-02-06 16:52:03 +08:00 via Android
    @zhuweiyou 楼主问得没错,就是 iframe
    tydl
        92
    tydl  
       2021-02-06 16:52:35 +08:00 via Android
    @a87586179 有 h5 才有的?你不是行内人吧,这个标签我在上大学 2000 左右就学了
    meepo3927
        93
    meepo3927  
       2021-02-07 09:06:43 +08:00
    iframe 还是有用的 ,比如 不同厂家合作会比较方便。

    iframe 不等于回到 jquery 时代吧, 感觉是过度解读。
    idblife
        94
    idblife  
       2024-04-15 21:50:08 +08:00
    @alexfarm #42
    请问如何解决业务系统的用户权限?
    idblife
        95
    idblife  
       2024-04-15 21:51:22 +08:00
    @tony1890 #80
    请问用户管理和权限管理是如何实现的呢?
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     941 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 32ms UTC 18:57 PVG 02:57 LAX 11:57 JFK 14:57
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86