首页 > 其他分享 >什么是iframe,火爆的微前端解决方案方案,教你快速看懂使用

什么是iframe,火爆的微前端解决方案方案,教你快速看懂使用

时间:2024-08-31 13:50:46浏览次数:13  
标签:event iframe 应用 解决方案 前端 example https com app

iframe(Inline Frame) 是一种 HTML 标签,它允许在一个网页内部嵌套加载另一个网页,从而实现在主页面中展示外部网页内容的功能。iframe 创建了一个独立的浏览上下文,拥有自己的文档对象模型(DOM)和执行环境,这意味着它不会与主页面共享JavaScript变量或CSS样式,提供了较好的隔离性。

一、简单使用案列,网站中嵌套 Chatgpt

1.它允许你在当前页面中嵌入另一个HTML文档。下面是如何在Vue中使用<iframe>的基本步骤

基本用法
直接在模板中使用 <iframe> 标签: 在Vue组件的模板部分,你可以直接插入<iframe>标签,并设置src属性指向你想要嵌入的页面URL。

<template>
  <div class="app-container">
    <iframe
        src="https://app.nextchat.dev/"
        frameborder="0"
    ></iframe>
  </div>
</template>
2.设置 src 属性:
src属性应该包含你希望加载的外部网页的URL。你可以直接硬编码这个URL,或者像上面的例子那样,使用数据属性动态绑定。


3.CSS样式:

通常,你需要为<iframe>设置宽度和高度,以确保它能够正确填充其父容器。你可以使用CSS来设置这些样式。

   .app-container {
     width: 100%;
     height: 100%; /* 或者具体的像素值 */
   }

   iframe {
     width: 100%;
     height: 100%;
   }
   
4.动态设置 src 属性
如果<iframe>的内容需要根据某些条件动态改变,你可以使用Vue的数据绑定特性来实现这一点。
<script setup lang="ts">
import { ref } from 'vue';

// 定义一个用于存储iframe src的响应式引用
const iframeSrc = ref('https://example.com');
</script>

完整vue代码如下

<template>
  <div class="app-container">
    <iframe
        src="https://app.nextchat.dev/"
        frameborder="0"
    ></iframe>
  </div>
</template>
<style lang="scss" scoped>
/** 关闭tag标签  */
.app-container {
  /* 50px = navbar = 50px */
  height: calc(100vh - 50px);
}

/** 开启tag标签  */
.hasTagsView {
  .app-container {
    /* 84px = navbar + tags-view = 50px + 34px */
    height: calc(100vh - 84px);
  }
}

iframe {
  width: 100%;
  height: 100%;
}
</style>
<script setup lang="ts">
</script>

注意事项
1.同源策略:由于浏览器的同源策略限制,只有当嵌入的页面与当前页面具有相同的协议、域名和端口时,才能访问到<iframe>内的DOM。
2.CORS:如果需要与<iframe>内部的页面进行交互(例如,发送请求或修改内容),则需要确保3.目标页面支持跨源资源共享(CORS)。
4.安全性:确保你嵌入的是可信的站点,因为恶意内容可能会危害到你的用户或网站。
5.性能:嵌入大型或复杂的页面可能会影响你的网站性能,因此要谨慎选择嵌入的内容。

二、轻松找到界面<iframe>嵌套网址

1.打开F12找到iframe标签中的src路径

2.右键点击跳转找到嵌套内容界面,微前端内跳转子界面同理

三、接下来我们看以下iframe常用的属性

1.src:这是最基本的属性,用于指定要加载的文档的URL。
 <iframe src="https://app.nextchat.dev/"></iframe>
2.width 和 height:这两个属性用于定义<iframe>的宽度和高度,可以是像素值或百分比。
  <ifram src="https://app.nextchat.dev/"width="800" height="600"></iframe>
3.frameborder:此属性用于设置<iframe>周围的边框。默认情况下,边框是存在的,但是可以将其设置为0来移除边框。
  <iframe src="https://app.nextchat.dev/"  frameborder="0"></iframe>
4.name:用于给<iframe>命名,可以用于表单提交的目标。
   <iframe src="https://app.nextchat.dev/" name="myFrame"></iframe>  
5.allowtransparency:布尔属性,用于指定<iframe>背景是否透明。
   <iframe src="https://app.nextchat.dev/" allowtransparency="true"></iframe>  
6.scrolling:用于控制<iframe>内部页面是否显示滚动条。可以设置为auto(自动)、yes(总是显示滚动条)或no(不显示滚动条)。
   <iframe  src="https://app.nextchat.dev/" allowtransparency="true"></iframe>         
7.sandbox:增强的安全性选项,可以限制<iframe>的内容,如不允许形成弹窗、不允许提交表单等。
 <iframe src="https://app.nextchat.dev/" sandbox="allow-scripts allow-same-origin"></iframe>   
8、loading:指示浏览器何时开始加载<iframe>的内容。可以是eager(立即加载)或lazy(延迟加载)
 <iframe src="https://app.nextchat.dev/" loading="lazy"></iframe>
9.referrerpolicy:定义了当请求<iframe>的src时,应该发送什么样的referrer头。
<iframe src="https://app.nextchat.dev/" referrerpolicy="no-referrer"></iframe>    
10.allow:用于指定<iframe>内容可以使用的特定API,例如allow="camera; microphone"。
<iframe  src="https://example.com" allow="camera; microphone"></iframe>

四、使用<iframe>实现微前端解决方案

微前端架构允许将一个大的应用程序拆分成多个小的子应用,每个子应用可以独立开发、部署和维护。使用<iframe>作为微前端解决方案是一种简单有效的方法,尤其是在需要隔离子应用的情况下。下面详细介绍如何使用<iframe>实现微前端解决方案。

1. 还不清除微前端的LOOK基本概念
主应用:负责管理和渲染各个子应用。

子应用:独立的小应用,可以是不同的技术栈或框架。

通信机制:主应用和子应用之间需要一种通信机制来传递消息。

2. 接下来我们LOOK实现步骤

步骤 1: 创建主应用


主应用负责加载和渲染各个子应用。首先创建一个主应用,开发中一般将系统管理平台设置为主。

<template>
  <div class="app-container">
    <h1>主应用</h1>
    <div v-for="(subApp, index) in subApps" :key="index" class="sub-app-container">
      <iframe
        :src="subApp.src"
        frameborder="0"
        loading="lazy"
      ></iframe>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 子应用列表
const subApps = ref([
  { src: 'https://subapp1.example.com' },
  { src: 'https://subapp2.example.com' }
]);
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub-app-container {
  width: 100%;
  height: 500px;
  margin-bottom: 20px;
}

iframe {
  width: 100%;
  height: 100%;
}
</style>

步骤 2: 创建两个子应用


子应用可以是任何技术栈的应用,例如React、Vue或Angular。每个子应用需要能够在<iframe>中正常运行。


子应用代码示例
假设你有两个子应用:subapp1和subapp2。
子应用1 (subapp1)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子应用1</title>
</head>
<body>
  <div id="root"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const rootDiv = document.getElementById('root');
      const app = document.createElement('div');
      app.innerHTML = '<h1>子应用1</h1>';
      rootDiv.appendChild(app);

      // 添加监听器以接收主应用的消息
      window.addEventListener('message', function(event) {
        if (event.origin !== 'https://mainapp.example.com') return;
        console.log('接收到的消息:', event.data);
      });

      // 发送消息给主应用
      window.parent.postMessage({ type: 'hello', data: '子应用1' }, 'https://mainapp.example.com');
    });
  </script>
</body>
</html>

子应用2 (subapp2)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子应用2</title>
</head>
<body>
  <div id="root"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const rootDiv = document.getElementById('root');
      const app = document.createElement('div');
      app.innerHTML = '<h1>子应用2</h1>';
      rootDiv.appendChild(app);

      // 添加监听器以接收主应用的消息
      window.addEventListener('message', function(event) {
        if (event.origin !== 'https://mainapp.example.com') return;
        console.log('接收到的消息:', event.data);
      });

      // 发送消息给主应用
      window.parent.postMessage({ type: 'hello', data: '子应用2' }, 'https://mainapp.example.com');
    });
  </script>
</body>
</html>

步骤 3: 实现通信机制


主应用和子应用之间需要一种通信机制来传递消息。通常使用window.postMessage来实现跨域通信。


主应用通信代码

import { onMounted } from 'vue';

onMounted(() => {
  // 监听子应用发来的消息
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://subapp1.example.com' && event.origin !== 'https://subapp2.example.com') return;
    console.log('接收到的消息:', event.data);
  });

  // 向子应用发送消息
  setTimeout(() => {
    window.frames[0].contentWindow.postMessage({ type: 'ping', data: '主应用' }, 'https://subapp1.example.com');
    window.frames[1].contentWindow.postMessage({ type: 'ping', data: '主应用' }, 'https://subapp2.example.com');
  }, 3000);
});

使用<iframe>实现微前端解决方案是一种简单有效的方法,特别适用于需要隔离子应用的情况。通过<iframe>,你可以轻松地将不同的子应用嵌入到主应用中,并通过window.postMessage实现跨域通信。这种方法不仅提高了开发效率,还增强了应用的可维护性和扩展性。

标签:event,iframe,应用,解决方案,前端,example,https,com,app
From: https://blog.csdn.net/m0_47483157/article/details/141626077

相关文章

  • 前端CSS:CSS雪碧图的作用以及加载方式
    前端CSS:CSS雪碧图的作用以及加载方式引言基本概念和作用说明基本概念作用说明示例一:基础雪碧图制作制作步骤代码示例HTML示例说明示例二:使用伪元素代码示例HTML示例说明示例三:响应式雪碧图代码示例说明示例四:雪碧图的动态加载代码示例说明示例五:雪碧图的自动工具......
  • 前端必知必会-CSS 渐变Gradients(上)
    文章目录CSS渐变CSS线性渐变使用角度使用多个颜色停止点使用透明度重复线性渐变CSS径向渐变径向渐变-均匀分布的色标(这是默认设置)径向渐变-不同分布的色标设置形状使用不同的Size关键字重复径向渐变总结CSS渐变CSS渐变可让您在两种或多种指定颜色之间......
  • 数据中心安全建设解决方案(Word完整版)
    第一章解决方案1.1建设需求1.2建设思路1.3总体方案信息安全系统整体部署架构图1.3.1IP准入控制系统1.3.2防泄密技术的选择1.3.3主机账号生命周期管理系统1.3.4数据库账号生命周期管理系统1.3.5双因素认证系统1.3.6数据库审计系统1.3.7数据脱敏系统1.3.......
  • 加油站智能视频分析解决方案
    伴随着加油站智能视频分析解决技术的快速发展和完善,加油站智能视频分析解决方案正在慢慢替换传统的监控。根据视频监控系统,通过视频监控人工智能技术,可以对加油站的运作全过程开展智能监管。以加油站安全性为突破口,设计方案达到工作地区安全性、超市日常的安全性、油区储存安全性......
  • Langchain-Chatchat本地部署的解决方案
      大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委,编写微软OpenAI考试认证指导手册。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。授权多项发明专利。对机器学习和......
  • 分布式锁的实现:ZooKeeper 的解决方案
    在分布式系统中,不同的服务或进程需要访问共享资源时,常常需要一种机制来确保在同一时刻只有一个服务或进程能够访问资源。这种机制被称为分布式锁。ZooKeeper,一个为分布式应用提供一致性服务的开源协调服务,提供了一种实现分布式锁的有效方法。ZooKeeper分布式锁的原理ZooKeep......
  • 《黑神话:悟空》缺失运行库怎么解决?缺少运行库解决方案
    随着《黑神话:悟空》的发布,不少玩家在体验这款备受期待的游戏时遇到了各类运行库缺失的问题,如VC++运行库、version.dll、nvtt.dll以及api64.dll等文件丢失或未找到的错误。这些问题直接影响了游戏的正常启动与运行。为帮助广大玩家顺利享受游戏乐趣,本文将详细介绍如何解决《黑神......
  • 运维系列&AI系列&Lenovo-G双系统系列(前传-装之前搜索的):ubuntu启动失败黑屏解决方案
    这ubuntu启动失败黑屏解决方案ubuntu启动失败黑屏解决方案现象异常前操作最终解决进入grub模式进入recovery模式配置为读写模式并以root登陆更新软件包并恢复有问题的安装接着reboot就会正常登陆GUI界面了回顾底下评论:问题一:你好,我把network哪里改了之后还是不行,第二次......
  • openGauss报错:Too many open files,解决方案
    操作系统信息Linuxuser-pc5.4.18-87.76-generic#gfb16-KYLINOSSMPThuAug3109:05:44UTC2023aarch64aarch64aarch64GNU/Linux解决方案当前使用gsql-dpostgres-p5432-r命令登录数据的时候,报错如下:gsql:FATAL:couldnotlookuplocaluserID1002:......
  • 宠物勺子秤芯片解决方案CSU8RP1186
    宠物勺子秤,一种1kg量程的便携式计量勺,主要是用来计算喂食的宠物食物重量,控制宠物饮食来保证宠物体重。这款宠物勺电子秤,采用CSU8RP1186主控开发完成,这款高性能单片机,,集成了24Bit高精度ADC,工作电压(2.4~3.6V),自带4×12的LCD驱动可满足大部分LCD显示需求,若是需要做LED显示芯片可......