iframe 标签(用于嵌套网页)及loading加载动画效果
一. 什么是 iframe
1. iframe 是 HTML元素,用于在网页中内嵌另外一个网页.
2. iframe 默认有一个宽高,存在边界.
3. iframe 是一个行内块级元素,可以通过 display 修改.
二. iframe 元素属性
1. src : 指定内联网页的地址
2. frameborder : iframe 默认有个边界,可以设置frameborder 为 0 清除边界.
3. width , height : 控制 iframe 的宽高.
4. name : 框架的名称.
5. srcolling : 是否可以滚动, yes,no,auto
三. iframe 相互操作
1. 首先明确一点,每个 iframe 里各自维护自己的全局window对象.
2. 另外,只有同域才能进行 iframe 之间的读写改,跨域时,只能进行简单的路由跳转.
3, 在父级使用window.frames[name]可以获得子级 iframe 的window对象,相应的可以获取 document 对象,从而对子级 iframe 进行 dom操作.
4. 在子级 iframe 想要操作父元素的 iframe ,直接使用子元素的window.parent来获取父级元素的window对象,从而获取document来操作dom.
四. iframe 之间的通信
1. 发送信息
当我们要向指定 iframe 发送信息时,首先要获取该 iframe 自己的window对象,让后使用该window对象的postMessage发送消息.
2. 接受信息
在要接收信息的地方,我们使用window的onmessage事件来接收信息,改事件会返回一个事件对象,其中data包含了返回的数据,orgin返回发送源.
3. 安全问题
当我们明确知道orgin是谁时,不要使用 ' * ' ,当要接收信息时,先判断orgin是否是我们要接收的源,在做后续操作.
五. 优点/缺点
优点 :
解决加载缓慢的第三方内容如: 图标和广告的加载问题.
能并行加载脚本.
方便管理,指的是如果有多个页面需要用到 iframe 的内容,那么只要修改 iframe 的内容就可以 实现统一管理.
iframe 可以原封不动的把嵌入的网页显示出来.
缺点 :
会产生很多的页面,不容易管理.
会增加服务器的http请求,对大型网址不可取.
会阻塞父页面的load事件.
iframe 和 主页面共享连接池,而浏览器对相同域的连接有限时,所以会影响页面的并行加载,也 就是说子文档和父文档的请求数会计算在一起.
不利于搜索引擎优化,也就是不利于SEO.
解决办法: 如果需要使用 iframe ,最好是通过JavaScript动态给 iframe 添加src属性,这样就可以绕开以上两个问题.
六. 注意事项
1. 获取子元素的document时要确保子元素所有的dom元素已经挂载完毕,因此在原生的写法时,必须写在window的onLoad事件中.
实例:
我的这个项目中只有一个地方使用了 iframe,简单介绍一下
点击左侧的 展厅大屏 之后显示的效果
对于这种需求我们需要配置好 展示大屏 页面的路由地址
完整代码:
<template>
<!-- iframe(HTML标签,用于在网页中嵌套另外一个网页) --><iframesrc="/bigscreen/index"frameborder="0"width="3385"height="1372"scrolling="no":style="'transform-origin: 0px 0px;transform: scaleX(' + scaleX + ') scaleY(' + scaleY + ');'"></iframe>
</template><script>
export default {name: 'IframeBigScreenView',data() {return {scaleX: document.body.clientWidth / 3385,scaleY: document.body.clientHeight / 1372,}},mounted() {window.onresize = () => {return (() => {this.scaleX = document.body.clientWidth / 3385this.scaleY = document.body.clientHeight / 1372})()}document.title = '智慧党建城市运行中心'document.body.style = 'overflow:hidden;background: #050a2a;'},destroyed() {// 离开页面生命周期函数document.body.style = ''},created() {window.handleJumpTo = function (url) {// this.$router.push('/8a50e37f0d4e29b90280df77adf1f387')window.location.href = url}},methods: {},
}
</script><style>
</style>
另一种:
完整代码(可以实现自适应):
<template><div class="app-container"><iframe :src="src" ></iframe></div>
</template><script setup name="resource">const src = ref('http://grxxxxxxxx3000/d/9CWBz0bik/lxxxxxxxxxx?orgId=1');</script><style scoped lang="scss">html,body,iframe{width: 100%;height: 100%;margin: 0;padding: 0;}iframe{border: none;}
</style>
给 iframe 添加loading加载效果:
loading的加载样式可以自定义去 element官网查看.
首先给 iframe 标签外层嵌套一个div,loading添加到外层的div上.
通过 attachEvent 来判断 iframe 是否加载完成.
完整代码:
<template><div class="app-container"><divv-loading="loadingIframe"element-loading-text="拼命加载中..."style="width: 100%;height: 100%;overflow: hidden;"><iframe class="ifra" :src="src" ></iframe></div></div>
</template><script setup name="resource">import {onMounted} from "vue";
import { getCurrentInstance } from 'vue'const src = ref('http://grafana.huhehe.cn:3000/d/9CWBz0bik/linuxxi-tong-jian-kong?orgId=1');
const loadingIframe = ref(true);
const { proxy } = getCurrentInstance()onMounted(() => {iframeLoad();
});function iframeLoad() {proxy.$nextTick(() => {const iframe = document.querySelector('.ifra');//attachEvent: 处理兼容性问题if (iframe.attachEvent) {//兼容IEiframe.attachEvent("onload", function () {// 加载完成loadingIframe.value = false;});} else {iframe.onload = function () {// 加载完成loadingIframe.value = false;};}});
}</script><style scoped lang="scss">html,body,iframe{width: 100%;height: 100%;margin: 0;padding: 0;}iframe{border: none;}
</style>
iframe 标签(用于嵌套网页)及loading加载动画效果相关推荐
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...
- [每天进步一点点~] uni-app css 实现 10种 loading加载动画效果
第一种 效果图: 检测动画.gif 需要准备一张下面的底图,因为我写不出这种分成无数线段的圆... 加载loading底图.png 代码: <template><view class ...
- vue 编写全局loading加载动画效果
加粗1.loading组件样式 <template><transition name="fade"><section><div class ...
- 7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
- android 载入svg动画,实例讲解使用SVG制作loading加载动画的方法
今天和大家分享一个以SVG图像为主的loading加载动画,现在移动端网页使用比较多,若还用GIF做loading图片的话,可能会影响图像的质量,所以使用SVG是一个不错的方式. 这次展示的代码由 A ...
- html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
- 【web素材】09—150款+炫酷的CSS3 loading加载动画,总有一款适合你
整理 | 杨小爱 我不知道,作为程序员的你,是否有这样的"职业病",就是在浏览网页时,有时候无意间看到一个很炫酷的效果,你会去研究一下,别人是怎么实现这个效果的吗?会去看一下别人的 ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
最新文章
- [BZOJ1572][Usaco2009 Open]工作安排Job
- Flutter入门(mac环境变量配置)
- mongoose常用方法(查询篇)
- OpenCASCADE:Foundation Classes之插件管理
- python合并 txt
- 如何实现一个c/s模式的flv视频点播系统
- 实对称矩阵的特征值求法_特征值的最大值与最小值
- 【OEIS】Xor Sum AtCoder2272
- 电子信息工程四年学习之思
- react框架设计原理及生命周期
- Java鸿鹄_(五)Java版Spring Cloud B2B2C o2o鸿鹄云商平台--技术框架3
- Mongodb安装教程
- 293、Java中级10 -【多线程】 2020.03.31
- win7下l2pt/sec 的789报错解决
- android新浪微博授权,新浪微博授权认证过程 - Android、iOS开发 - OSCHINA - 中文开源技术交流社区...
- 新颖的自我介绍_精选简单新颖的自我介绍
- Excel-VBA 快速上手(二、条件判断和循环)
- tplink WR740N v4 WR941N v6 安装openwrt
- 12搜索功能实现+docker
- IDEA 的Surround with快捷键 (例:try/catch)