I want to displa...">
Clever Geek Handbook

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


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


source 


new Vue({
el:'#frame',
store:store,
router:router,
render: component
})


just try giving a name for your route. Hope it works.

0


source


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


source






More articles:


All Articles