跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > iframe 标签(用于嵌套网页)及loading加载动画效果

iframe 标签(用于嵌套网页)及loading加载动画效果

时间:2024-04-10 16:40:43 来源:网络cs 作者:纳雷武 栏目:卖家故事 阅读:

标签: 效果  标签 
阅读本书更多章节>>>>

一. 什么是 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标签,用于在网页中嵌套另外一个网页) -->  <iframe    src="/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 / 3385        this.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">        <div             v-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) {//兼容IE            iframe.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>

     

阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/gushi/2024-04-10/156625.html,文章来源:网络cs,作者:纳雷武,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论