vue 给iframe设置src_使用不带src属性的vuejs在iframe中渲染组件
I want to render component in this iframe. Is there any option of creating html element or rendering component in iframe?
new Vue({
el:'#frame',
store:store,
router:router,
render: component
})
解决方案
You can refer below link That helped me a lot.
Here is the link and the code snippets.
Vue.component('i-frame', {
render(h) {
return h('iframe', {
on: { load: this.renderChildren }
})
},
beforeUpdate() {
//freezing to prevent unnessessary Reactifiation of vNodes
this.iApp.children = Object.freeze(this.$slots.default)
},
methods: {
renderChildren() {
const children = this.$slots.default
const body = this.$el.contentDocument.body
const el = document.createElement('DIV') // we will mount or nested app to this element
body.appendChild(el)
const iApp = new Vue({
name: 'iApp',
//freezing to prevent unnessessary Reactifiation of vNodes
data: { children: Object.freeze(children) },
render(h) {
return h('div', this.children)
},
})
iApp.$mount(el) // mount into iframe
this.iApp = iApp // cache instance for later updates
}
}
})
Vue.component('test-child', {
template: `
{{ title }}
`,
props: ['title'],
methods: {
log: _.debounce(function() {
console.log('resize!')
}, 200)
},
mounted() {
this.$nextTick(() => {
const doc = this.$el.ownerDocument
const win = doc.defaultView
win.addEventListener('resize', this.log)
})
},
beforeDestroy() {
const doc = this.$el.ownerDocument
const win = doc.defaultView
win.removeEventListener('resize', this.log)
}
})
new Vue({
el: '#app',
data: {
dynamicPart: 'InputContent',
show: false,
}
})
vue 给iframe设置src_使用不带src属性的vuejs在iframe中渲染组件相关推荐
- PowerDesigner中设置数据库类型,设置default value,Comment,自增属性,以及数据库设计中的需要考虑的示项,带有小数点的数据显示
1.PowerDesigner设置数据库 2.设置数据库的自增属性 3.将default Value设置出来,将comment也勾选出来 4.注意事项 1.不再一个库中的两个表没法建立关联关系. 2. ...
- android chrome iframe设置src属性无法启动app
0x01 Android Intents with Chrome Android有一个很少人知道的特性可以通过web页面发送intent来启动apps.以前通过网页启动app是通过设置iframe的s ...
- vue 给iframe设置src_vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: GoBack {{item.name}} export default { name: 'hello', data () { return ...
- vue 给iframe设置src_vue项目中,iframe的src动态赋值
可以类似这样: /** * 动态创建iframe * @param dom 创建iframe的容器,即在dom中创建iframe.dom能够是div.span或者其它标签. * @param src ...
- VUE 响应式原理源码:带你一步精通 VUE | 原力计划
作者 | 爱编程的小和尚 责编 | 王晓曼 出品 | CSDN博客 学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...
- 详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
- 用iframe设置代理解决ajax跨域请求问题
用iframe设置代理解决ajax跨域请求问题 参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...
- vue设置img大小的属性_Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑...
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如 H1标 ...
- VUE页面背景设置为视频
VUE页面背景设置为视频 VUE页面背景设置为视频 文章目录 VUE页面背景设置为视频 前言 一.div部分 二.CSS代码 三.效果展示 总结 前言 VUE页面背景设置为视频 一.div部分 视频文 ...
最新文章
- nginx php 大小写问题,Nginx实现url请求不区分大小写
- C++中explicit关键字的作用
- 英特尔5G基带发布时间提前半年以上,但2019款iPhone支持5G仍有点悬
- 【渝粤教育】国家开放大学2018年春季 0222-22T模拟电子电路 参考试题
- 抖音城市美食算数报告
- 第十七节:ES6新增的Map和WeakMap 又是什么东西?
- Ranger-Kafka插件安装
- C语言速看,C语言高速入门系列(二)
- Windows10系统下PaddleOCR文本检测和文本识别安装
- 一些常用的Maven命令的作用
- ARToolkit Part 1: Labelling 详解
- 青岛市中小学学籍系统服务器,全国各省市中小学学籍网登录入口
- docker容器—搭建LNMP
- 用PyTorch进行手写数字识别
- GoogleCast 简介
- 基因家族分析③:linux下hmmer的安装与使用
- 领域驱动设计实践框架-COLA的解读
- [625]Git +TortoiseGit安装配置详细步骤
- java前后端分离框架_Spring Boot 入门及前后端分离项目实践
- android 编译 icu,使用NDK构建ICU
热门文章
- 64位linux安装mysql数据库吗_linux下怎么安装mysql数据库
- 学堂在线 python_i学堂Python在线课堂4 | NumPy 与Pandas
- Linux基础——Linux 基本指令 mkdir, rmdir 和 rm
- 深度学习TensorFlow生产环境部署(环境准备篇)
- Matlab常用快捷键
- java代码删除本地文件_java程序实现删除本地文件
- activemq概念介绍
- Opencv3 Robert算子 Sobel算子 拉普拉斯算子 自定义卷积核——实现渐进模糊
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---31
- Android之——AsyncTask和Handler对照