Render component in iframe using vuejs without src attribute
<iframe id="frame" width="100%" height="100%">
</ifrme>
I want to display a component in this iframe. Is there a way to create an html element or render component in an iframe?
new Vue({
el:'#frame',
store:store,
router:router,
render: component
})
+4
Vishal dodiya
source
to share
3 answers
You can refer to the link below which helped me a lot. Here is the link and 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: '<div>
<h3>{{ title }}</h3>
<p>
<slot/>
</p>
</div>',
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,
}
})
https://jsfiddle.net/Linusborg/ohznser9/
+6
Vishal dodiya
source
to share
new Vue({
el:'#frame',
store:store,
router:router,
render: component
})
just try giving a name for your route. Hope it works.
0
Tarang dave
source
to share
I tried and found no way to mount vue directly on #iframe
.
However, you can add div
to #iframe
and mount it:
// create iframe element
var iframe = document.createElement('iframe')
iframe.id = 'iframe'
// place iframe inside page html
document.documentElement.insertBefore(iframe, document.querySelector('html').firstChild)
// append div to iframe
var container = document.createElement('div')
container.id = 'container'
iframe.contentWindow.document.body.appendChild(container)
// render vue component inside iframe on #container
new Vue({
el: container,
render: h => h(component)
})
Result:
<html>
<iframe id="iframe">
#document
<html>
<head>
</head>
<body><!-- <-- here was <div id="container"></div> -->
<div class="message" style="color: orange;">Hello from Vue component!</div>
</body>
</html>
</iframe>
<head>
</head>
<body>
</body>
</html>
Ps I have used this code in chrome extensions content scripts (JavaScript is injected in pages). If you intend to use it elsewhere, make sure you are not violating the same origin policy .
0
Darvydas Šilkus
source
to share