时间戳

首页 > 解决方案 > 使用 VueJS 将样式附加到 iframe 内的元素

vue.js - 使用 VueJS 将样式附加到 iframe 内的元素

问题描述

我有一个模式屏幕，其中包括一个 iframe 来发送议程项目。现在我无法设置 iframe 本身的样式，因为它也在此应用程序的其他地方使用过。我需要为这个特定的模式做一些自定义样式，因为我必须在不同的地方对齐一些按钮等。

我找到了一段代码来将样式应用于 iframe 的内部，但我无法让它工作。请注意，我在 VueJS 工作，将常规 JS 转换为 VueJS 不是我的强项。我真的很想设计一些物品...

  <div class="base-modal" style="min-width:1100px;">
    <div id="modal-tools">
      <button id="close-modal" type="button" class="mdi mdi-18px mdi-close" @click="$parent.close"></button>
    </div>
    <div class="box-column">
      <iframe class="is-full-width" style="min-height:650px" id="the-iframe" :src="`crmtask/ical?crmtaskid=${crmtaskid}`" ref="iframe"></iframe>
    </div>
  </div>
</template>

<script>

export default {
  mounted () {
    var iframe = document.getElementById('the-iframe')
    var css = document.createElement('style')
    css.type = 'text/css'
    var styles = 'body {' +
        '  background-color: lime;' +
        '  color: pink;' +
    '}'
    css.appendChild(document.createTextNode(styles))
    iframe.contentDocument.head.appendChild(css)
  },
  props: {
    crmtaskid: {
      type: String,
      default: ''
    }
  }
}
</script>

我真的希望能够在这个 iframe 内设置一些按钮的样式

标签： vue.jsiframevuejs2

解决方案

如果你愿意使用第三方插件，你可以使用vue-friendly-iframe或vue-frame。

Vue-frame允许您在 a 中渲染框架div并传递一个类和样式。

推荐阅读