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

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

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

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

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

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

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

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

需要根据窗口大小变化自适应的话,很自然的想到了 window.onres

iframe vue 宽度_vue 如何自适应调整嵌入的 iframe 的大小,让用户完全感觉不出有 iframe 这个东西?...相关推荐

  1. iframe高度宽度自适应

    最近在项目中用到了iframe,写出来做个记录,能帮到大家最好. 一.首先简单介绍一下iframe iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 所有浏览器都支持 <ifr ...

  2. Vue3、TypeScript 实现图片数量及大小随宽度自适应调整

    前言 过了这么久,想起自己还有个博客,更点内容吧! 来,上需求! 最近在做个前端界面,要求在一行中展示一些图片,展示的图片数量随着窗口宽度大小进行变化,除此之外还有以下要求: 图片要均匀分布: 所有图 ...

  3. vue图片宽高自适应_Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!...

    源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将widt ...

  4. vue 多页面iframe不刷新_Vue中iframe保持活动状态(不刷新)

    前言: 提起vue的缓存,大家第一时间想到的一定是keep-alive,但是了解keep-alive缓存原理的都知道是将节点信息保留在VNode中的组件中(在内存中),并在需要渲染时从VNode渲染到 ...

  5. vue 修改div宽度_Vue 组件通信方式及其应用场景总结(1.5W字)

    前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...

  6. vue 项目的屏幕自适应方案

    方案一:使用 scale-box 组件 属性: width 宽度 默认 1920 height 高度 默认 1080 bgc 背景颜色 默认 "transparent" delay ...

  7. bootstraptable列宽自适应内容_多列列表框行高和列宽的自适应调整

    LabVIEW:2015 在使用多列列表框(Multicolumn Listbox)时,有时不同列显示的内容长度不一致,为了显示更加美观,并节省界面显示空间,需要实现多列列表框的行高和列宽的自适应调整 ...

  8. 基于VUE的echart图表自适应窗口大小变化插件开发

    需求 在PC端开发含图表展示的页面时,需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化. 常规做法 在含有图表组件mounted的钩子中增加监听window的resize事件,具体如下代 ...

  9. 计算机界面调整,计算机应用系统界面自适应调整

    计算机应用 计算机技术 科技与经济 2006年第11期 计算机应用系统界面自适应调整 巫 娜 (中国冶金建设集团包头钢铁设计研究总院,内蒙古包头 014010) 摘 要:系统的易用性是计算机应用系统的 ...

最新文章

  1. 微服务测试之性能测试
  2. java.lang.ClassCastException: [B cannot be cast to java.lang.String
  3. 服务器打包运营级H5商城源码
  4. matlab中文帮助_拿走不谢,simulink,stateflow,ecoder帮助手册中英对照版首发
  5. spring整合dubbo实现简单分布式接口调用
  6. 基于JAVA+SpringMVC+Mybatis+MYSQL的药店门店管理系统
  7. vim 批量替换字符串_Vim 有什么奇技淫巧?
  8. mysql php 封装类_PHP递归实现层级树状展开的方法
  9. Linux http配置文件解析
  10. Illustrator 教程,如何在 Illustrator 中编辑画板?
  11. [翻译].NET framework 4.0并行编程:入门
  12. GPS数据格式的分析与处理
  13. 港澳台手机号正则表达式,区号+手机
  14. RedHat认证介绍
  15. Linux查看gzip文件原始大小,Linux 文件管理:Linux gzip 压缩
  16. MySQL可重复读隔离级别为何没有解决幻读(MVCC原理简介)
  17. std::floor和std:ceil简述
  18. 微创新:5种微笑改变创造伟大产品
  19. 74 [backtrader期货策略] 十大经典策略-汉斯123策略(逻辑优化版)
  20. 解决ultraedit-32卸载后文件关联问题

热门文章

  1. Python表达式 n1 与 表达式n%2
  2. STM32的中断优先级说明(抢占式与响应式优先级)
  3. Zabbix 3.4配置监控项及监控Linux、Windows客户端
  4. latex 公式编号的自定义
  5. plsql激活码(永久可用)
  6. 如何在官网下载tomcat
  7. 磨刀不误砍材工 - Java的基础语言要素(从变量/常量切入,看8种基本数据类型)
  8. Linux禁止普通用户使用某些命令
  9. 北京今年已发生7次因乘客打架影响地铁运营-打架-地铁-地铁打架
  10. 林园:为2009年培育“种子”