html - 外部 SDK からの全画面要素のレンダリングを制限する

Question

ページ上に全画面要素 (幅と高さ 100%) をレンダリングする SDK を使用しています。これを制限したい。このプロジェクトでは Vue.js を使用しています。

このデモに従って、iframe 内でレンダリングしようとしました。

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/

そして、この質問を読んでください: Render Component in iframe using vuejs without src attribute

しかし、この動作を制限するものは何もありません。問題の SDK はZoom Web SDKです