当前位置: 首页 > news >正文

前端 | iframe框架标签应用

文章目录

  • 📚嵌入方式
  • 📚图表加载显示
  • 📚100%嵌入及滑动条问题
  • 📚加载动画保留

前情提要

  • 计划用iframe把画好的home1.html(echarts各种图表组成的html数据大屏)嵌入整合到index.html(搭的可视化作业框架)里。
  • 再具体一点说,就是把home1.html用iframe框架标签放到到li.home1里。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

📚嵌入方式

  • 直接用iframe标签
    <li class="home1"><iframe src="home1.html"></iframe>
    </li>
    

📚图表加载显示

在嵌入时出现了图表不显示的问题,解决方法:

  • 将绘图js里涉及到的myChart.setOption(option);全部改为:
    if (option && typeof option === 'object') {myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
    
  • 以上代码设置 ECharts 图表的选项和监听浏览器窗口大小变化时自动调整图表大小
    • ​option && typeof option === 'object'​,这个条件的作用是判断 ​option​ 是否存在且是一个对象类型。
      • 如果条件成立,说明 ​option​ 是一个有效的选项对象,那么接下来的操作才会执行。
      • 这个条件的目的是确保不会在 ​option​ 不存在或者不是对象类型时,运行 ​myChart.setOption(option)​ 报错。
    • 通过 ​window.addEventListener('resize', myChart.resize)​ 给浏览器窗口的 ​resize​ 事件添加了一个监听器,当窗口大小发生变化时,会自动调用 ​myChart.resize​ 方法,即重新调整图表的大小,使其适应新的窗口尺寸。

📚100%嵌入及滑动条问题

  • 给iframe设置样式:<iframe src="home1.html" style="width: 100%; height: 100%;"></iframe>
  • 出现了不想要的滑动条
    在这里插入图片描述
    • 我这里的解决办法是把home1.html原页面的height改小一点点。
    • height: 100vh;改为height: 96vh;,嵌入后滑动条消失。
      在这里插入图片描述

📚加载动画保留

  • 本来图表加载,是会有初始动画的(柱形图生成,折线图生成等等),但是现在iframe嵌入直接一步到位了(而重新加载框架时又会出现动画)。
    在这里插入图片描述

  • 考虑以下方法保留初始加载动画。

    • 给iframe标记id,<iframe id="myIframe" src="home1.html" style="width: 100%; height: 100%;"></iframe>
    • 在js的window.onload = function ()里添加:
      var iframe = document.getElementById('myIframe');
      iframe.contentWindow.location.reload();
      
      • 通过 ​iframe.contentWindow​ 获取到了 ​<iframe>​ 的窗口对象。这个窗口对象提供了对嵌入的文档的访问和操作。
      • 调用 ​location.reload()​ 方法,重新加载 ​<iframe>​ 中的页面。这个方法会导致 iframe 内部文档的全部重新加载。

相关文章:

前端 | iframe框架标签应用

文章目录 &#x1f4da;嵌入方式&#x1f4da;图表加载显示&#x1f4da;100%嵌入及滑动条问题&#x1f4da;加载动画保留 前情提要&#xff1a; 计划用iframe把画好的home1.html&#xff08;echarts各种图表组成的html数据大屏&#xff09;嵌入整合到index.html&#xff08;搭…...

linux -系统通用命令查询

有时候内网环境下&#xff0c;系统有些命令没有安装因此掌握一些通用的linux 命令也可以帮助我们解决一些问题查看 1.查看系统内核版本 uname -r2.查看系统版本 cat /etc/os-release3. 查看cpu 配置 lscpu4.查看内存信息 free [参数] 中各个数值的解释如下表 数值解释t…...

python炒股自动化(1),量化交易接口区别

要实现股票量化程序化自动化&#xff0c;就需要券商提供的API接口&#xff0c;重点是个人账户小散户可以申请开通&#xff0c;上手要简单&#xff0c;接口要足够全面&#xff0c;功能完善&#xff0c;首先&#xff0c;第一步就是要找对渠道和方法&#xff0c;这里我们不讨论量化…...

LeetCode(35)螺旋矩阵【矩阵】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 54. 螺旋矩阵 1.题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a…...

BeanUtil.copyProperties的优化与使用(解决copyProperties null值覆盖问题)

BeanUtil.copyProperties的优化与使用 前言一、copyProperties是什么&#xff1f;二、使用步骤1.引入库2.基础使用3.进阶使用4.实用场景 总结 前言 BeanUtil.copyProperties的优化与使用 一、copyProperties是什么&#xff1f; 在java中&#xff0c;我们想要将一个类的值赋值…...

Redis基本操作及使用

&#x1f4d1;前言 本文主要是【Redis】——Redis基本操作及使用的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一…...

python 继承父类的变量和方法

[root@zz python]# cat a1.py # !/usr/bin/env python # -*- coding: utf-8 -*- class AddrBookEntry(object): ##类定义 def __init__(self,a,b): ##定义构造器 self.var1=a+9 self.var2=b+11 def updatePhone(self, num): # 定义方法 sel…...

ubuntu22.04新机使用(换源,下载软件,安装显卡驱动,锁屏长亮)

换源 国内有很多Ubuntu的镜像源&#xff0c;包括阿里的、网易的&#xff0c;还有很多教育网的源&#xff0c;比如&#xff1a;清华源、中科大源。推荐使用中科大源&#xff0c;快得很。 /etc/apt/sources.list编辑/etc/apt/sources.list文件, 在文件最前面添加以下条目(操作前…...

如何给shopify的网址做301跳转

很多shopify的运营者或者推广者由于缺货或者货物变更&#xff0c;又或者自己更换了使用的主题&#xff0c;导致自己的URL结构发生了变化&#xff0c;由于不想浪费掉自己原有URL 的流量&#xff0c;就想做个301跳转&#xff0c;让自己新的网址来承接原有的流量。接下来给大家介绍…...

Redis之秒杀系统

目录 Redis 秒杀 Mysql数据库设计 Mysql秒杀实现 MysqlRedis秒杀实现 秒杀是一种高并发场景&#xff0c;通常指的是在短时间内&#xff08;秒级别&#xff09;有大量用户同时访问某个商品或服务&#xff0c;争相抢购的情景。在这种情况下&#xff0c;系统需要处理大量并发请…...

c++基础----new

c基础----new 在C中&#xff0c;new是一个运算符&#xff0c;用于动态分配内存并返回指向该内存的指针。它可以用于创建单个对象、数组以及动态分配的对象。 下面是new的几种常见用法&#xff1a; 动态分配单个对象&#xff1a; int* ptr new int; // 动态分配一个int类型…...

Java中的mysql——面试题+答案(存储过程,外键,隔离级别,性能优化)——第23期

当涉及MySQL时&#xff0c;面试题的范围可以涵盖数据库设计、优化、复制、分片等方面。 什么是数据库范式&#xff1f;为什么要遵循数据库范式&#xff1f; 答案&#xff1a; 数据库范式是一组规范&#xff0c;用于设计关系数据库表的结构&#xff0c;以减少数据冗余和提高数据…...

一种新的基于物理的AlGaN/GaN HFET紧凑模型

标题&#xff1a;A new physics-based compact model for AlGaN/GaN HFETs (IEEE MTT-S International Microwave Symposium) 摘要 摘要 - 针对AlGaN/GaN HFET&#xff0c;提出了一种无拟合参数的物理解析模型。对于非饱和操作&#xff0c;建立了两个接入区和栅极下方I-V特性的…...

uniapp基础-教程之HBuilderX基础常识篇02

uniapp创建项目时属性多为vue后缀&#xff1b;其中每个文件中都包含了三段式结构分别是template&#xff1b;script&#xff1b;style形势&#xff0c;分别是前端显示的画面以及js和css样式。 template&#xff1a;说大白话就是给别人看的&#xff0c;我们打开页面就可以看到的…...

如何源码编译seaTunnel

如何源码编译seaTunnel 参考Set Up Develop Environment 编译前准备 下列软件需要提前安装好 GitJava ( JDK8/JDK11) 并设置JAVA_HOME 环境变量Scala (只支持 scala 2.11.12 )JetBrains IDEA . 下载源码并编译 git clone gitgithub.com:apache/seatunnel.git cd seatunne…...

msng病毒分析

这是一个非常古老的文件夹病毒&#xff0c;使用XP系统的文件夹图标&#xff0c;采用VB语言开发&#xff0c;使用了一种自定义的壳来保护&#xff0c;会打开网址http://www.OpenClose.ir,通过软盘、U盘和共享目录进行传播&#xff0c;会在U盘所有的目录下生成自身的副本&#xf…...

Unity安装

DAY1 下载Unity 打开Unity3D官网&#xff0c;下载Unity Hub&#xff0c;管理Unity的软件。链接https://unity.cn/releases (可能需要注册账号&#xff0c;就正常注册登录即可) 如果是新版的hub&#xff0c;可能长下面这个样子&#xff0c;还是英文的&#xff0c;点击圆圈的设…...

【代洋集团特惠好物:80瓦太阳能折叠包】

为您的绿色出行保驾护航&#xff01;代洋集团倾情推出80瓦太阳能折叠包&#xff0c;为您的户外活动提供清洁、便捷的电力支持。 这款太阳能折叠包采用高效能太阳能板&#xff0c;可折叠设计方便携带&#xff0c;轻松为您解决户外用电问题。80瓦的强大功率&#xff0c;让您在户…...

一致性Hash算法

Hash算法 哈希算法将任意长度的二进制值映射为较短的固定长度的二进制值&#xff0c;这个小的二进制值称为哈希值。哈希值是一段数据唯一且极其紧凑的数值表示形式。 Hash算法在安全加密领域MD5、SHA等加密算法&#xff0c;数据存储和查找的Hash表等方面均有应用。Hash表的数…...

linux 下如何将/dev/nvme0n1符格式化为空盘符

linux 下如何将/dev/nvme0n1符格式化为空盘符 作者&#xff1a;DPDK开发栏目&#xff1a;公开2023-08-30 03:01254 在Linux下&#xff0c;你可以使用以下步骤将/dev/nvme0n1硬盘格式化为空盘符&#xff1a; 首先&#xff0c;确保你拥有适当的权限。以管理员或root用户身份登录…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

【题解-洛谷】P10480 可达性统计

题目&#xff1a;P10480 可达性统计 题目描述 给定一张 N N N 个点 M M M 条边的有向无环图&#xff0c;分别统计从每个点出发能够到达的点的数量。 输入格式 第一行两个整数 N , M N,M N,M&#xff0c;接下来 M M M 行每行两个整数 x , y x,y x,y&#xff0c;表示从 …...

Spring事务传播机制有哪些?

导语&#xff1a; Spring事务传播机制是后端面试中的必考知识点&#xff0c;特别容易出现在“项目细节挖掘”阶段。面试官通过它来判断你是否真正理解事务控制的本质与异常传播机制。本文将从实战与源码角度出发&#xff0c;全面剖析Spring事务传播机制&#xff0c;帮助你答得有…...

【Pandas】pandas DataFrame dropna

Pandas2.2 DataFrame Missing data handling 方法描述DataFrame.fillna([value, method, axis, …])用于填充 DataFrame 中的缺失值&#xff08;NaN&#xff09;DataFrame.backfill(*[, axis, inplace, …])用于**使用后向填充&#xff08;即“下一个有效观测值”&#xff09…...

结合PDE反应扩散方程与物理信息神经网络(PINN)进行稀疏数据预测的技术方案

以下是一个结合PDE反应扩散方程与物理信息神经网络(PINN)进行稀疏数据预测的技术方案,包含完整数学推导、PyTorch/TensorFlow双框架实现代码及对比实验分析。 基于PINN的反应扩散方程稀疏数据预测与大规模数据泛化能力研究 1. 问题定义与数学模型 1.1 反应扩散方程 考虑标…...