Question

<iframe id="frame" width="100%" height="100%">

</ifrme>

我想在这个iframe中渲染组件。有没有在iframe中创建html元素或渲染组件的选项？

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

Answer 1

您可以参考以下链接，这对我帮助很大。这是链接和代码片段。

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/

Answer 2

对我来说，最简单的方法是使用srcdoc属性。它将加载原始的html覆盖src属性。

<template>
    <iframe :srcdoc="html"></iframe>
</template>

Answer 3

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

只是尝试为路线视图命名。希望它有效

Answer 4

我已经尝试过，还没有找到直接在#iframe上安装vue的方法。

但是，您可以将div添加到#iframe并进行安装：

// 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)
})

结果：

<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>

P.s。我已在 chrome扩展内容脚本（注入页面的javascript）中使用了此代码。如果您要使用请确保不要破坏Same-origin policy。

使用不带src属性的vuejs在iframe中渲染Component

4 个答案: