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

vue 如何自适应调整嵌入的 iframe 的大小,让用户完全感觉不出有 iframe 这个东西?

  •  
  •   black11black · 2020-05-30 18:50:35 +08:00 · 5841 次点击
    这是一个创建于 1398 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,vue 开发目前遇到一个困难,

    需求背景大概是这样,vue 框架搭的前端,里面需要做个介绍页面,只要有展示功能即可,所以可以是纯静态的。后端程序员写前端苦手,设计网页更别提,遂咨询 V2 老哥,如何快速把网上模板扒到 vue 框架里面。老哥表示扒个几把,直接把网上扒下来的东西跑起来然后 iframe 塞到 vue 里就行了,我表示惊为天人

    于是从 html 模板网上随便拉了个好看的模板,嵌入 vue,确实是能跑起来。而我对效果有一个希望是,希望这个 iframe 在用户端的表现跟一个原生的 vue componet 一样(由于没有互动,主要体现在响应式方面)。我希望用户使用中完全感受不到这里是 iframe 嵌入的。

    具体来说分解出来应该有三个需求

    1 、iframe 嵌入某个链接地址,这个 iframe 的高度应该跟该链接的源页面的高度完全相等。

    2 、这个 iframe 不能带有滚动条,整个页面的滚动应该由主页面滚动条完成。

    3 、这个 iframe 的高度应该随窗口变化自适应变化。(源页面由 jquery 完成,本身有响应式功能)

    ================================================ 分割线

    需要根据窗口大小变化自适应的话,很自然的想到了 window.onresize = () => {} 这种东西 于是写了这段代码

    <template>
      <div>
        <iframe style="width:100%" ref="main_page_iframe"></iframe>
      </div>
    </template>
    
    <script>
    // 省略一些不重要内容
    export default {
      mounted(){
        let that = this
        window.onresize = () => {
          let ifdoc = that.$refs.main_page_iframe.contentDocument
          let cHeight = Math.max(ifdoc.body.clientHeight, ifdoc.documentElement.clientHeight)
          let sHeight = Math.max(ifdoc.body.scrollHeight, ifdoc.documentElement.scrollHeight)
          that.$refs.main_page_iframe.style.height = Math.max(cHeight, sHeight) + 'px'
        }
      }
    }
    </script>
    

    目前问题:iframe 确实能够填满整个页面,并且在用户窗口大小改变的时候(比如当用户窗口变窄,根据原始页面响应式设计,该页面应该会变长),此时 vue 的 iframe 也确实会变高。但是如果之后再将用户窗口变宽,原始页面会变窄,但 iframe 高度却不会缩回。已经目视到页面变短的效果发生,但函数中 cHeight 和 sHeight 的值不会变化。

    已经懵逼,有人拯救吗?

    13 条回复    2021-10-28 10:34:42 +08:00
    sanmaozhao
        1
    sanmaozhao  
       2020-05-30 20:01:20 +08:00
    sanmaozhao
        2
    sanmaozhao  
       2020-05-30 20:04:57 +08:00
    ljpCN
        3
    ljpCN  
       2020-05-30 22:03:55 +08:00 via Android
    巧了,最近有相同的需求。据我所知可以用 postMessage 实现,前提是嵌入的 iframe 也受你控制。另外感谢楼上 @sanmaozhao 分享,我仔细看看。
    dallaslu
        4
    dallaslu  
       2020-05-30 22:12:02 +08:00
    如果你的这段 html 尺寸固定,不需要交互,那么可以包装成 svg,

    ```
    <svg width="448" height="500" viewBox="0 0 448 500"
    version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <foreignObject x="0" y="0" width="448" height="500">
    <body xmlns="http://www.w3.org/1999/xhtml">
    <!-- HTML -->
    </body>
    </foreignObject>
    </svg>
    ```

    当成图片来用,想怎么缩放就怎么缩放
    iConnect
        5
    iConnect  
       2020-05-30 22:21:02 +08:00
    @dallaslu 这都行... 太魔幻了...
    ljpCN
        6
    ljpCN  
       2020-05-31 00:34:34 +08:00 via Android
    我好奇你这个需求是不是一个 div 里面套 iframe,div 的 css 这宽度 100vw,高度 100vh,iframe 写 width="100%" height="100%" 就行了
    black11black
        7
    black11black  
    OP
       2020-05-31 13:37:06 +08:00
    @dallaslu 很显然尺寸不固定,响应式网页会随着用户窗口的变化而变化啊
    iamverylovely
        8
    iamverylovely  
       2020-05-31 13:44:32 +08:00
    @black11black iframe 高度 document.documentElement.clientHeight,宽度 100%,应该就可以了吧
    iamverylovely
        9
    iamverylovely  
       2020-05-31 13:46:40 +08:00
    或者写到一个事件里,检测窗体高度改变之类的~~不是很专业哈~~只是自己前几天遇到过就是这么解决的
    black11black
        10
    black11black  
    OP
       2020-05-31 14:31:19 +08:00
    @sanmaozhao 不行,如果 iframe 内部页面超出屏幕的话,这么写是无法滚动的
    black11black
        11
    black11black  
    OP
       2020-05-31 14:37:07 +08:00
    @sanmaozhao 大佬,cli4 创建的项目,按链接里这么装载之后没作用啊

    <iframe
    v-resize="{ log: true }"
    width="100%"
    src="/api/static/index_show_page.html"
    frameborder="0"
    ></iframe>

    他显示还是跟一个普通的 iframe 一样,并没有自动 reszize,但是看 log 的部分提示 resizer 已经运行了,懵逼
    dallaslu
        12
    dallaslu  
       2020-05-31 17:38:05 +08:00
    @black11black 我的意思是比例固定,宽度可以变化呀
    tcpdump
        13
    tcpdump  
       2021-10-28 10:34:42 +08:00
    解决了吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5734 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 06:25 · PVG 14:25 · LAX 23:25 · JFK 02:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.