vue项目内嵌iframe,iframe如何自适应高度

news2025/3/1 11:38:59

vue项目内嵌iframe,iframe如何自适应高度

  • 一、直接上代码(google版本的)
    • 上面代码只处理了google,其他几个浏览器可以自行参考一下

一、直接上代码(google版本的)

  <iframe
    id="iframeContainer"
         src="/static/iframePhone/html/main.html"
         style="width: 600px; height: 80px"
   ></iframe>
   
setInterval(() => {
    this.reInitIframe('iframeContainer', 70) //dom更新后开始重置iframe,加计时器是为了等待iframe中js完全加载完再重新计算iframe
}, 300)

 // 重新设置iframe大小,只处理了google
 reInitIframe(iframeId, minHeight) {
        try {
            let iframe = document.getElementById(iframeId)
            let bHeight = 0
            bHeight = iframe.contentWindow.document.body.scrollHeight
            let height = Math.max(bHeight, minHeight) + 10
            iframe.style.height = height + 'px'
        } catch (ex) {}
    },

上面代码只处理了google,其他几个浏览器可以自行参考一下

// 重新设置iframe大小
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false) {
            try {
                bHeight = iframe.contentWindow.document.body.scrollHeight;
            } catch (ex) {                
            }
        }
        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
        else if (isIE == false && isOpera == false && iframe.contentWindow) {
            try {
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            } catch (ex) {
            }
        }
        else if (isIE == true && isIE9More) {//ie9+
            var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
            if (heightDeviation == 0) {
                bHeight += 3;
            } else if (heightDeviation != 3) {
                eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                bHeight += 3;
            }
        }
        else//ie[6-8]、OPERA
            bHeight += 3;

        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        //alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
        iframe.style.height = height + "px";
        // console.info("iframe rehight");
    } catch (ex) { }
}
function maxSizeIframe(iframeId, minHeight) {
    //eval("window.IE9MoreRealHeight" + iframeId + "=0");
    window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 300);
}
maxSizeIframe("mainFrame", 500)

在这里插入图片描述
结束啦!!!!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1127701.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023 uniapp( vue3 + TS )使用canvas生成海报并保存,taro/微信小程序也适用

有段时间没写vue了&#xff0c;有点生疏了...... 1、代码有注释&#xff0c;完整代码如下 <template><view class"page"><canvas class"canvas" v-if"isShow" :style"{width:${canvasWidth}px,height:${canvasHeight}px}&…

算法学习(四)将一颗二叉搜索树转排序的双向链表

描述 输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的双向链表。如下图所示 数据范围&#xff1a;输入二叉树的节点数 0 \le n \le 10000≤n≤1000&#xff0c;二叉树中每个节点的值 0\le val \le 10000≤val≤1000 要求&#xff1a;空间复杂度O(1)O(1)&#x…

无障碍阅读他人开源项目结构:看完本文,你将信心满满

先看看阿里是怎么约定的 我印象中&#xff0c;以前在看《阿里巴巴Java开发手册》时&#xff0c;好像有关于工程结构和应用分层相关的内容&#xff0c;于是我回翻了一下&#xff0c;果然有&#xff1a; 它这里面讲的内容大概就是&#xff1a;关于一个正常的企业项目里一种通用的…

项目中拖拽元素,可以使用html的draggable属性,当然也可以用第三方插件interact

项目中拖拽元素&#xff0c;可以使用html的draggable属性&#xff0c;当然也可以用第三方插件interact 一、安装二、引用三、使用 一、安装 npm install interactjs二、引用 import interact from interactjs三、使用 <div class"drag_box"> &…

Linux虚拟网络设备—Veth Pair

veth是Virtual Ethernet Device的缩写&#xff0c;是一种成对出现的Linux虚拟网络接口设备。它最常用的功能是用于将不同的Linux network namespaces 命名空间网络连接起来&#xff0c;让二个namespaces之间可以进行通信。我们可以简单的把veth pair理解为用一根网线&#xff0…

2023年【加氢工艺】免费试题及加氢工艺在线考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 加氢工艺免费试题考前必练&#xff01;安全生产模拟考试一点通每个月更新加氢工艺在线考试题目及答案&#xff01;多做几遍&#xff0c;其实通过加氢工艺在线考试很简单。 1、【单选题】《中华人民共和国职业病防治法…

ES6初步了解Symbol的用法

ES6中为我们新增了一个原始数据类型Symbol&#xff0c;让我为大家介绍一下吧&#xff01; Symbol它表示是独一无二的值 Symbol要如何创建 第一种创建方式&#xff1a; let sy Symbol()第二种创建方式&#xff1a; let sy Symbol.for()具体独一无二在哪呢&#xff1f;它们的地…

阻抗导纳控制理解

书籍《Modern Robotics - Mechanics , Planning, and Control》中关于阻抗控制和导纳控制的部分&#xff1a; 下面结合上边的内容谈一谈我对导纳控制的理解。 1、质量-弹簧-阻尼 首先&#xff0c;不论是阻抗控制&#xff0c;还是导纳控制&#xff0c;他们同根同源&am…

计算机网络_03_tcp/ip四层模型

文章目录 1.为什么会有tcp/ip?2.tcp/ip是什么?3.为什么会有tcp/ip四层模型?4.tcp/ip四层模型介绍 1.为什么会有tcp/ip? 早期的计算机(计算机网络没有出现之前)几乎都是各自为战, 各种操作系统厂家百花齐放, 市面上的大部分计算机使用的都是不同的操作系统, 为每个人提供定…

【rk3568-linux】 rk3568x_linux-- 编译说明

概述 一个好的安装教程能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成长。 开发环境 开发环境&#xff1a;ubuntu18 文章目录 概述开发环境一、选择型号二、全自动编译三、…

基于蜉蝣算法的无人机航迹规划-附代码

基于蜉蝣算法的无人机航迹规划 文章目录 基于蜉蝣算法的无人机航迹规划1.蜉蝣搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用蜉蝣算法来优化无人机航迹规划。 1.蜉蝣搜索算法 …

一个工作三年的前端是如何做性能优化的

你是怎么做性能优化的&#xff1f;关于这一个问题&#xff0c;也是我们前端开发程序员经常会讨论到的问题&#xff0c;接下来这篇文章将总结一下前端方面的性能优化及方式。 为什么要做性能优化 性能优化是为了提高网页的加载速度和相应速度&#xff0c;给用户带来更好的体验…

asp.net在线考评系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net在线考评系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发 asp.net 在线考评系统 二、功能介绍 本…

Python自动处理pptx:新建、另存、添加幻灯片、添加标题、插入文本图片图形、提取文本

Python-pptx库是一个用于创建、更新和读取Microsoft PowerPoint .pptx 文件的Python库。它允许我们使用Python脚本自动化PowerPoint文件的创建、更新和读取操作&#xff0c;是一个非常方便自动化处理PPTX的工具。 安装 pip install python-pptx创建 from pptx import Prese…

记一次公司项目上的常规渗透测试

授权项目上的渗透测试&#xff0c;漏洞有网站弱口令—存储型XSS—文件上传。 前言 本文由知识星球《网络安全情报攻防站》星友堂主投稿&#xff0c;感谢投稿。授权项目下常规的渗透测试。欢迎朋友们积极投稿&#xff0c;投稿有奖励。天冷了来领奶茶钱 正文 网站首页 首页啥都没…

前端koa搭建服务器(保姆级教程)——part1

目录 koa简介前端项目搭建koa环境第一步&#xff1a;新建项目第二步&#xff1a;环境初始化&#xff0c;安装依赖初始化项目&#xff0c;生成package.json文件安装koa依赖安装koa-router 路由管理依赖安装dotenv 环境变量依赖安装nodemon 热启动依赖 第三步&#xff1a;代码调用…

黄金代理这么多,怎么选?

目前&#xff0c;现货黄金代理已成为了市场中成熟的模式&#xff0c;我们只要在搜索引擎上搜索如何在市场中开户&#xff0c;会搜到各种各样的黄金代理&#xff0c;其中更是不乏服务非常优秀的。部分投资者早就接受了黄金代理的存在&#xff0c;并且率先开始在黄金代理中进行开…

【单调栈】503. 下一个更大元素 II、42. 接雨水

提示&#xff1a;努力生活&#xff0c;开心、快乐的一天 文章目录 503. 下一个更大元素 II&#x1f4a1;解题思路&#x1f914;遇到的问题&#x1f4bb;代码实现&#x1f3af;题目总结 42. 接雨水&#x1f4a1;解题思路&#x1f914;遇到的问题&#x1f4bb;代码实现&#x1f3…

反射Java

反射是获取摸个类的所有对象 构造器 &#xff1a;成员变量&#xff1a; 成员方法 获取方式 package Reflect;//获取class类的对象public class Test1Clacc {public static void main(String[] args)throws Exception {Class c1Student.class;System.out.println(c1.getName(…

神奇代码备份恢复工具逸事与操作指南

文章目录 一&#xff0c;序二&#xff0c;逸事三&#xff0c;为什么今天要提这个工具四&#xff0c;操作界面1. 文章发表者备份项目步骤2. 文章发表者恢复项目操作步骤3. 文章阅读者恢复项目步骤 五&#xff0c;附件1. 示例备份文件2. 神奇代码备份恢复工具源码备份 一&#xf…