精华内容
下载资源
问答
  • Vue 中 iframe 的高度自适应

    万次阅读 2019-04-28 18:13:17
    iframe引入报表,高度自适应。 <template> <div style="height:auto;"> <iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe"> <...

    iframe引入报表,高度的自适应。

    <template>
      <div style="height:auto;">
        <iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe">
        </iframe>
      </div>
    </template>
    
    <script type="text/javascript">
    
    
    export default {
      name: 'turnoverfamily',
      data(){
        return{
          bdTokenUrl : 'http://193.112.22.34:8081/WebReport/ReportServer?reportlet=PHBIP_JTXX.cpt&op=view'
        }
      },
      created() {
        this.getUrl();
        this.$nextTick(()=>{
            this.getCode();
        });
      },
      mounted(){
        /**
         * iframe-宽高自适应显示   
         */
        const oIframe = document.getElementById('bdIframe');
        const deviceWidth = document.documentElement.clientWidth;
        const deviceHeight = document.documentElement.clientHeight;
        oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
        oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
      },
      methods: {
        /**
         * 获取-外部接口信息
         */
        getUrl() {
            let that = this
            let bdUrl = {queryurl: this.$paths.bdpath+'/locate'};
            this.$api.getBdToken(bdUrl,function(res) {
                that.bdTokenUrl = res.data.data;
        })
      },
    }
    }
    </script>
    
    <style>
    
    </style>
    

     

    展开全文
  • class Iframe { ... * 每次调用会产生一个实例, 这个方法是为了定时期更新iframe的高度,解决iframe渲染时高度不准确的情况,兼容pc和mobile * @param options { * target:dom, * content:html, *...
    class Iframe {
        constructor(options) {
            this.$el = document.createElement('IFRAME');
            this.$options = options;
            this.$target = options.target ? document.getElementById(options.target) : null;
            this.$content = options.content;
            this.browser = this.findBrowser();
            this.lastMaxHight = 0;
            this.timer = null;
        }
    
        //创建iframe
        createIframe() {
            if (typeof this.$options.margin === "string") {
                warn("margin只能是个number类型");
            }
            //初始化iframe参数
            let style = {
                width: "100%",
                border: "0",
                frameSpacing: "0",
                marginHeight: "0",
                frameBorder: "no",
                scrolling: "no",
                vspale: "0",
                webkitOverflowScrolling: 'touch',
                height: document.body.clientHeight - (this.$options.margin ? this.$options.margin : 0)
            };
    
            for (let key in style) {
                this.$el[key] = style[key];
            }
    
            //给iframe添加内容
            if (this.browser.versions.ios) {
                //console.log('IOS 设备特殊处理');
                //IFRAME.srcdoc = '';
            } else {
                this.$el.srcdoc = this.$content;
            }
    
            //给当前实例扩展一些属性
            this._options = {
                "phoneWidth": document.body.clientWidth,
                "lastMaxHight": 0,
                "resized": 0,
                "isIos": this.browser.versions.ios
            };
    
            this.$el.onload = () => {
                this.updateIframe();
            };
    
            if (!this.$target) return warn("目标元素为htm dom元素");
            this.$target.appendChild(this.$el);
    
            this._iframeWin = this.$el.contentWindow || this.$el.contentDocument.parentWindow;
            if (this._options.isIos) {
                this._iframeWin.document.body.innerHTML = this.$content;
                //console.log('IOS 设备特殊处理iframeWin.document.body.innerHTML')
            }
    
            //定时更新iframe
            this.timer = setInterval(() => {
                this.updateIframe();
            }, 500)
        }
    
        //更新iframe
        updateIframe() {
            if (!this._iframeWin) {
                this._iframeWin = this.$el.contentWindow || this.$el.contentDocument.parentWindow;
            }
            if (this._iframeWin.document.body) {
                let $document = this._iframeWin.document;
                let newHeight = $document.documentElement.scrollHeight || $document.body.scrollHeight;
                let clientHeight = $document.documentElement.clientHeight || $document.body.clientHeight;
    
                if (clientHeight > newHeight) {
                    newHeight = clientHeight;
                }
    
                if (newHeight > 0 && newHeight !== this.lastMaxHight) {
                    if (this.isMobile() && this._options.resized < 2) {
                        this._options.resized++;
                        let imgs = $document.body.querySelectorAll('img');
                        let fonts = $document.body.querySelectorAll('font');
                        newHeight = newHeight / 2;
                        //img
                        let w = this._options.phoneWidth - 30 - 16;
                        //console.log('适应手机的图片尺寸为:' + w)
                        let half = w / 2;
    
                        for (let item of imgs) {
                            if (item.width >= w) {
                                let ratio = w / item.width;
                                if (item.height > 0) {
                                    item.height = item.height * ratio;
                                }
                                item.width = w;
                            } else if (item.width > half) {
                                let ratio = half / item.width;
                                if (item.height > 0) {
                                    item.height = item.height * ratio;
                                }
                                item.width = half;
                            }
                        }
                        //font
                        for (let item of fonts) {
                            if (item.size > 3) {
                                item.size = `${item.size - 2}`
                            } else if (item.size === 3) {
                                item.size = `${item.size - 1}`
                            }
                        }
                    }
                    this.lastMaxHight = newHeight;
                    this.$el.height = this.lastMaxHight;
                    console.log('IFRAME高度更新为:' + this.$el.height);
                }
            }
        }
    
        //清除定时器
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
    
        //判断浏览器版本
        findBrowser() {
            return {
                versions: function () {
                    let u = navigator.userAgent, app = navigator.appVersion;
                    return {//移动终端浏览器版本信息
                        trident: u.indexOf('Trident') > -1, //IE内核
                        presto: u.indexOf('Presto') > -1, //opera内核
                        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQ HD浏览器
                        iPad: u.indexOf('iPad') > -1, //是否iPad
                        webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
                    };
                }(),
                language: (navigator.browserLanguage || navigator.language).toLowerCase()
            };
        }
    
        //判断是不是手机
        isMobile() {
            let versions = this.browser.versions;
            if (versions.ios || versions.android || versions.android || versions.iPad) {
                /*console.log(" ios终端: " + versions.ios);
                console.log(" android终端: " + versions.android);
                console.log(" 是否为iPhone: " + versions.iPhone);
                console.log(" 是否iPad: " + versions.iPad);
                console.log(navigator.userAgent);*/
                return true
            } else {
                return false
            }
        }
    }
    
    /**
     * 每次调用会产生一个实例, 这个方法是为了定时期更新iframe的高度,解决iframe渲染时高度不准确的情况,兼容pc和mobile
     * @param options {
     *   target:dom,
     *   content:html,
     *   margin:number
     * }
     * @returns {Iframe}
     */
    export default (options) => {
        let iframe = new Iframe(options);
        iframe.createIframe();
        return iframe;
    };
    

     

    展开全文
  • vue 之 加载 iframe 的处理

    千次阅读 2019-01-29 17:28:00
    vue中加载 iframe 会出现跨域问题、以及iframe的高度自适应问题,以下是本人的解决办法: getGoodsContentHtml---- 你的iframe页面的地址, 如不同域的情况下,要解决掉跨域的问题,发布线上要nginx进行iframe的...

    vue中加载 iframe  会出现跨域问题、以及iframe的高度自适应问题,以下是本人的解决办法:

     

    getGoodsContentHtml---- 你的iframe页面的地址,  如不同域的情况下,要解决掉跨域的问题,发布线上要nginx进行iframe的地址转换,本地 config.js 也如此

     

    转载于:https://www.cnblogs.com/aoqizhonghua/p/10335014.html

    展开全文
  • [Vue]使用iframe嵌入页面

    千次阅读 2021-03-28 17:20:20
    //数字是页面布局高度差 } changeMobsfIframe() window.onresize = function(){ changeMobsfIframe() } }, } script> scrolling="no"表示不显示滚动条 style="position:absolute;top:80px;left: 120px;" 表示嵌入的...

    Vue中嵌套iframe,将要嵌套的文件放在static文件夹中:

    <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe>
    

    src可以使用相对路径,也可使用网页路径等:

    <iframe src="https://www.baidu.com/" width="300" height="300" frameborder="0" scrolling="auto"></iframe>
    
    • Vue+ElementUI+iframe实现在当前页面中嵌入另一个HTML页面:
    <template>
      <div>
        <iframe src="http://0.0.0.0:8080" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:80px;left: 120px;"></iframe>
      </div>
    </template>
     
     
    <script>
      export default {
        data () {
          return {
          }
        },
        mounted(){
          /**
          * iframe-宽高自适应显示   
          */
          function changeMobsfIframe(){
            const mobsf = document.getElementById('mobsf');
            const deviceWidth = document.body.clientWidth;
            const deviceHeight = document.body.clientHeight;
            mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //数字是页面布局宽度差值
            mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
          }
     
          changeMobsfIframe()
     
          window.onresize = function(){
            changeMobsfIframe()
          }
        },     
      }
    </script>
    
    1. scrolling="no"表示不显示滚动条
    2. style="position:absolute;top:80px;left: 120px;" 表示嵌入的iframe位置距离浏览器顶部80px,距离浏览器左侧120px,刚好是我的侧边栏和顶部导航栏的宽度
    3. mounted() 中的方法在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。包括调整页面的高和宽
    4. changeMobsfIframe 为自适应宽高的方法,分别在第一次页面加载和调整浏览器大小(onresize ())时被调用
    展开全文

空空如也

空空如也

1
收藏数 4
精华内容 1
关键字:

vueiframe高度自适应

vue 订阅