公共组件
<template> <div class="wrapper-c"> <iframe id="fram_box" @load="loadFrame" :src="url"> </iframe> </div> </template> <script> export default { name: 'CommonIframe', props: { url: { type: String, default: '' } }, data () { return { loading: true } }, mounted () { const close = this.closeLoading $('#fram_box').load(() => { close() }) }, methods: { closeLoading () { this.loading = false }, // loadFrame函数是iframe加载完成后回调函数 loadFrame () { // 获取iframe节点 const iframeBox = document.getElementById('fram_box') iframeBox.height = document.documentElement.clientHeight iframeBox.width = document.documentElement.clientWidth - 260 // 获取iframe html文件 const doc = iframeBox.contentWindow.document // 获取iframe html文件head const head = doc.getElementsByTagName('head') // 新建style标签 const stylee = document.createElement('style') const sHtml = '.container-fluid{padding: 0!important;}' stylee.innerHTML = sHtml // 将style标签添加进iframe html文件的head里 head[0].append(stylee) } } } </script> <style lang="scss" scoped> .wrapper-c { #fram_box { border-width: 0px; } } </style>
父组件引用
<common-iframe :url="satpSrc"></common-iframe>