iframe嵌套vue页面打开空白

前端每日一提，请对比 tianjin、 iphone， 魔住 federation 三种微前端方案的优劣。一、 iphone 优点，隔离性绝对拉满， j s 样式局环境完全隔离，永不冲突， 零学习成本，零改造，任何技术站都能直接嵌套，接入最快，稳定性最高，浏览器原生支持无框架。兼容性问题，浏览器前进后退，失效，性能灾难。 子应用独立渲染引擎，资源无法共享，白屏时间长，通信繁琐，只能用 post message， 数据同步复杂，无法适配大型 spa 现代前端项目几乎不用 two tianjin 优点，生产即可用完善的 js 沙箱 样式隔离资源加载机制，无侵入接入，子应用几乎不用改代码，支持所有技术站。 vryakangilaj 体验流畅，单页应用体验路由同步，无渲染割裂，配套完善，子应用生命周期域加载，跨应用通信，开箱即用。缺点，有一定学习成本，需要理解。沙箱生命周期沙箱存在边界限制，部分第三方库局对向会兼容问题， 公共依赖，无法天然共享，会重复打包。 free 麻柱 fire station amalf 优点，运行时共享 跨应用共享组建工具库依赖，大幅减小打包体积，构建效率高，自应用独立构建，互不影响，力度极细，可以共享单个组建函数，不局限于整个应用。缺点，无隔离性， j s 样式全局污染是最大硬伤，强绑定挖怕谷 技术占藕合，不支持无侵入接入，不是完整微前端方案，无法实现应用级的独立部署，隔离运行。

大家好，我是叶一，这节课为大家讲一讲制定页面内潜入其他表单，他们之间如何交互。比如我为了加快开发速度，直接在制定页面内潜入普通表单，供用户提交数据。先放一个按钮， 再放一个抽屉组件，里面放一个 fm 组件，给他配置好地址，这里要注意一下高度，给他设成百分之百， 不然他就会很窄，这里一定要选择百分比。点击这个按钮，显示出这个组件，让用户提交数据， 所以先复制它的 fire id， 给这个按钮配置，点击四键， 它的作用就是显示这个抽屉组件。 z 点儿美元符号就是一大的组件选择器，加上它的 fire id。 抽屉组件呢，有个修方法，我们直接调用，就是这样，点击这个按钮，这个抽屉组件就会显示用户就可以提交数据了。 这个数据虽然提交成功了，但是我还想实现一个功能，提升用户体验。 数据提交之后，这个抽屉主线让它自动隐藏，这个怎么实现呢？这就涉及到他两个的交互了， 制定页面和这个潜入的页面，他两个是独立的页面，他们有两个独立的 window 对象，他们互不干扰，但是通过一些方法呢，他们可以互相访问，互相控制。 这里我就讲一下潜入表单如何去控制布局页面。这个制定页面的抽屉组件 大家都知道 rise 点美元符号就是一大的组件选择器，我们只要在普通表那里面能拿到制定页面的这个 rise， 就可以对这个制定页面的主件进行操作。这个 rise 怎么拿呢？教大家一个非常简单的方法，把这个 rise 的引用存到页面的 window 对象里面， 把它存到 window 点儿页 e res 这个属性里面。 只要我在普通表单里面拿到他的 window 对象，我就一样可以访问到页面的 z 上下文，就可以控制这个自定义页面。我们要实现的是普通表单提交之后自动关闭自定义页面的 表单里面有一个表单提交后的事件，它可以在表单提交后执行一些代码， 我们只需要在这里面拿到自定义面 window 对象的介意 race 属性，就拿到了自定义页面的 race 上下文儿 e e 认识属性在哪里面？在制定页面内的 window 对象里面。而现在普通表单潜入了制定页面，所以说它的副页面就是制定页面，副页面怎么拿 window 点 parent 我就拿到副页面了， 然后它里面有个 window 对象，通过结构复制我们就取到了 e z 是可以去控制制定页面的这个普通表带没有潜入其他表单，这个 z e z 就不存在， 我们就要判断 eez， 如果存在才执行关闭抽屉组件的这个动作， 把制定页面抽屉组件的背后 id 给复制过来， 执行 high 的方法，仅仅三行代码就实现了交互，大家可以举一反三去实现更多的功能。现在我们去测试一下 他是不是点提交之后这个抽屉主页会自动关闭，是不是很完美，体验也非常好，而且我们的方法是非常简单方便的。这节课到此结束，谢谢大家观看。

好，来看看这道题使用 infream 哎如何绕过同源策略，那这里呢，有一些呃方法提供给大家啊。第一个呢，就是子域共享，这里面共享， 那如果你此框架加载的内容呃来自与主页面相同的顶级域哎，但不同的子域可以通过设置到给我们的点读麦来绕过这个同源策略啊。 那设置主页面和子页面的这个度面为相同的顶级域名，就可以把它们视为是同源的了。第二个方法呢，就是允许同源属性。允许同源属性，哪一个属性呢？ along same， origin， 就这个属性。嗯，可以在 e frame 标签当中加上这个属性，那这样的话就允许主页面去继承副页面的 origin， 从而允许直接访问主页主页面的内容了。 ok， 然后还有第三个呢，就是使用这个 sandbox 的 属性啊， sandbox 的 这个属性， 它呢可以增强 e frame 的 安全性，但也有可能阻止某些功能的正常使用。如果紫玉上的内容是可信的哎，我们可以适当的去配置 sandbox 的 属性来允许一些必要的功能，好吧。然后第四个呢，就是服务端哎，配置 course c o r s。 如果你此框架中的内容来自不同的域，并且你能够控制这个域，就可以在服务器去配置 course 了，那让它允许特定的来源访问这个内容，虽然这不是直接针对 ifrem 的 解决方案，但它可以帮我们去解决一些跨域的问题啊。第五个呢，嗯，我们可以把 此页面设置为可信任的， 也就是说，对于完全有你自己来控制的这个子页面呢，可以考虑把它设置为信任页面的一部分，那么这也就说明你可以在副页面当中以信任的方式和子页面进行一个交互，但这样的话要求子页面必须是安全可靠的，知道吧？就这五个方法，大家可以去试一试，那么这就是这道题的理解了。

好，那其实大家知道的第一个误区，这个同学们之前理解的第一个误区就是把微前端等同于 i frame， 这个我们大家说明了，并不是啊。好，那第二点呢，很多同学会微前端和组件化 区分不开啊，你这呢等有很多同学会被会把微前端和矩阵化两个概念混淆，会把这两个概念混淆啊，那其实这个点呢，我们跟大家说了，他这种思路也是错的啊，微前端也并不等于是矩阵化，而整体的微前端体系呢，应该是矩阵化的更上层 啊，矩阵化的更上层在第三个点就是所有的这个场景， 是不是所有的场景都能够用微前端体系啊？这个呢，也不对，这几个点是大家之前的误区，我给大家先梳理出来啊， 微前端跟 iphone 去比较呢，它其实更注重于运行时的一些逻辑啊。再呢就是在组电话这层来说，微前端体系呢，其实在 组建化的上层啊，他更关注的是整个应用层的，是属于整个应用框架这一层，而组建层其实是很细的代码逻辑。场景的话，一般呢可以在呃，比如说比较大型的项目，还有呢比较复杂的，涉及到多人团队合作的这种项目场景下，你可以用 这个微前端体系啊啊，这是整个梳理的，大家可能之前有的三个误区给大家去先说明，然后那个朋友问到，比如他跟微这个乾坤去比较的话有什么优势，我们待会通过项目实战去给大家去从零到一来编辑这个项目的时候，大家就理解了啊，我们先把基本概念呢给大家先梳理 好，那所以其实微前端的整个架构啊，它的核心呢，第一点是拆分和组合啊，真正的这个理解啊，就深入理解微前端架构的话，几点抓住两个点，第一个是拆分此应用，第二个点是 组合或者叫集成应用。集成拆分子应用呢，你可以把很多的这个场景就是不同不同场景的呃，应用模块 拆分为子应用啊，拆分为子应用之后，然后呢接下来去独立的开发，并且呢它与技术站是无关的。 好开放之后呢，这个时候其实你就为了去将所有之前拆分的那些子应用跟你主应用能够统一，所以会涉及到集成应用啊，将整个子应用呢集成到主应用中来，实现统一的用户体验。 这是我们在深入去理解微前端架构的时候，两个核心点啊，第一个是拆分子应用，第二个是集成应用啊，将整个应用呢集成到这个微前端体系里面来。但是呢，在开发的时候我们会面临几个问题，第一个主要的问题啊，这个也是大家在面试的时候 最常考的点，第一个就是应用之间怎么隔离，这个隔离呢，其实分为两部分，一个是 g s 隔离，一个是 c s 样式隔离啊，这里我们前面其实也跟大家说了， g s 隔离和样式隔离，这是应用之间如何隔离的 问题啊，这个问题呢，其实我们在呃我们的训练营里面啊，是关于微前端架构这部分有详细的介绍，这呢我们这里就不给拿去具体来展开了。 gs 格力，样式格力啊，然后呢再试的第二点，其实就是 应用之间怎么通信的问题啊？应用之间怎么通信？那其实包括第一点，可以通过事件总线啊，你还可以通过自定义的这个消息队列，以及还可以通过状态管理，比如说 redux， more box， 还有呢，类似于如果是 这个 view 的 应用的话啊， view 作为基础框架来说的话，那其实在 view 那 一层呢，你还可以通过 pina 来去在上层管理这个呃应用的状态来往下去透传传递 好，这是隔离，那么其实主要考察的就是这几点啊，一个是应用之间怎么隔离，还有呢就是隔离之后他们又怎么样去通信？这两个问题就是在考察微前端体系的概念的时候，最常被问到的两个方面的问题啊。这点呢，大家先有个印象， 好，那常规的这个微前端框架呢？这里我们给大家简单来去做一个比对啊，那我们这里就不给他详细来去展开了，主要呢有这样几个， 刚才同学有问到跟乾坤相比较的话有哪些区别？好，这个第一列呢是乾坤，然后呢，它本身底层是基于 single s p a 的， 它核心思想的话，第一个是基于路由的分发，还有呢，自己实现了一套 g s 沙箱来去处理啊，整个实现的方式的话，是通过 g s 打包构建的入口文件和 it 妙解析来完成。 优点的话其实比较多啊，就是毕竟都做了这么这么多年，对吧？所以呢，其实乾坤这一套体系在优点方面，不管是生态还是接入 都更方便，更灵活，更简单。但是缺点呢，其实对于路由的依赖，包括呢主子应用的藕合度还是比较高，另外呢就是通信机制也比较复杂，我们如果想单独去构建一些子产物，然后加载的话，那这个其实在乾坤体系里面不是那么好做啊，适用的场景呢，就是传统的中后台的管理系统， 有比较明确的基座和子用的划分，这个点是怎么理解呢？其实我就我们这里跟大家说的集成应用，这个主应用就称之为 应用的基座，然后基应用呢，就是上层应用啊，这是我们这里说的基座应用和基应用的划分，这是适用场景。那像这个 micro app 啊，或者说是还有很多其他的哈，什么无界啊这些大家知道的，那么它们都是类似于 web component 这个方案 啊，他其实也有一些适用的场景，对呢，不做过多介绍。最后一个就是 module foundation， module foundation 这个概念也是我们今天待会给大家去介绍的一个主角最主要的概念啊，他是从 ypak 五开始正式提出的， 这个点提出之后呢，其实在 ypak 整个体系里面，他不算有呃，没有特别多的这种最佳实践能够拿出来说。但是为什么 今天我们这个课程内容给大家去以 module federation 的 这个方案来去具体给大家细讲呢？是因为在字节系的很多产品里面，以及在自己团队里面呢，对于 module federation 有 非常多的尝试， 并且有很多产品基于这一套架构，有很多这个最佳实践和沉淀出来内容。所以呢，我把这一部分交给大家之后，刚好大家拿着这个思路可以跟其他的这个同行啊，也就是给大家去共同竞争一个岗位的这种前端开发，或者说中高级的前端开发能够形成一个差异化。 那为什么这个点我们说在 webpack 里面其实没有起到特别大的反响，但是在字节系的很多产品，包括呢字节的整个工具链里面 做了很多不错的最佳的尝试呢。第一个点啊，从这里大家可以看到第一个点，本身 y pad 五提出来这个概念之后，那它的实现方式呢？ 从 y pad 支持的原声插件开始，在编的时候就会把整个依赖确定好，它会单独构建出来具体的产物。然后呢，产物构建出去之后，它另外一个大的概念就叫去中心化。注意啊， e to e 大家听说过吧，对吧？这个端的端去中心化，它相当于没有基座的概念。那之前什么乾坤啊， single s p i 这些它都要有个主应用，但是 module federation 它不需要主应用，它没有基座这个概念。

远程预览界面上显示空白区域也没有纸张，远程预览下方显示纸张为零零界面上也看不到白色的纸张。这个视频介绍出现这种情况可能的几个原因， 以及可以尝试的几种方法。一、对集中打印或 a o 服务器一般是租的网上的云服务器，有时候需要远程操作服务器，注意在操作时远程桌面链接时取消勾选打印机。 远程桌面操作者在远程桌面选项本地资源，去掉勾选项打印机。如图，如果不取消勾选服务器上会出现重定向字样的打印机，可能会造成一些问题。上面那种预览什么都没有情况也是其中一种情况。 为确保 windows 打印服务正常，安装一个打印机，三、端桥端出现异常，端桥不在线，端桥下打印机驱动存在问题。 如果有多个端桥，可以用其他端桥测试下。如果只有一个端桥有问题，可以确认异常。在该端桥电脑上 可以尝试在该端桥端以管理员权限安装最新版 c loadop 测试下或桌面上的 c loadop 快 捷方式右键以管理员权限运行试试以管理员权限重启本机 c loadop， 重启端桥端 c loadop 后，再测试下 四、端桥下共享打印机故障，共享打印机故障会导致一些异常，先用其他端桥测试确认问题，在该端桥电脑上观察该端桥电脑 windows 打印机列表是否有共享打印机。删除所有共享打印机 只用本地打印机。在测试下，如需要共享打印机，删除后再重新安装共享下。五、打印到了集中打印或服务器的虚拟打印机上， 目前的许多虚拟打印机保存成 xps 或 pdf 文件都是弹窗方式弹出，选择路径保存对应的文件。 集中打印或 a o 端桥模式属于远程打印，如果远程那里没有人，点击弹窗点确认会造成异常。 a o 服务器安装 c load up 时，勾选您服务工作模式，可禁用虚拟打印机，防止打印到 a o 服务器上造成问题。 六，多个发送端同时打印，同时预览出现异常，表现为所有端桥都出现问题，都是预览什么也没有也没有空白的纸张。因为所有端桥都出现了问题， 所以和 a o。 服务器有关。重启 a o。 服务器上的 c load up 可以 解决该问题，并尝试安装最新版，该版本之后的版本有处理 a o 服务器上以管理员权限安装最新版 c load up， 测试下六点六点幺点幺修正，解决内嵌预览内的同步打印偶尔引起的死锁问题。 上面是一些可能的远程预览出现什么也没有也无纸张的情况，之前视频里提到了一些端桥打印不出来情况，这个视频只说明预览界面什么都没有的情况，其他的个别也简略介绍下。简略介绍其他端桥打印不了的。 之前的视频简略总结，没启动端口被阻挡防火墙端口未放开自己一名证书。问题二，免费版超出五个限制访问，欢迎页面提示超出限制，如需您测试，重启 c o d 后可重新进关桥异常， 如需确认问题，可在异常时通过测试，欢迎页面排查问题。

好好上网，我们给大家讲了一下这个插槽以虚拟节点，还有一个就是什么，就是这一个单页用里面他的底层实现是基于这个哈西来实现的，明白吗？好，那做了这个了之后来接下来的话，我们就选另外一个产品，叫 vivo， 什么 vivo？ 好，那大家需要注意一下啊，就是在我们使用什么，使用微友做这个什么，在啊使用微友介绍做开发的时候啊，不光 不仅仅啊，不仅仅啊，单单的什么不仅仅单单的啊，使用忽悠，借势做开发， 一般啊，我们还需要使用一些其他的什么其他的这个，呃，产品配合着什么产品配合着啊？配合着固有结实， 做什么做开发？那这一类啊，这一类配合什么配合会有借势做开发的产品啊？ 有很多，明白吧？那像常见的，像我们今天要学的这个叫 v u， 什么 v u 港啊， v ut 啊 vut。 明白，这个是叫路由模块，但路由模块是主要是做这种什么做这种单页应用的啊？除了这个的话，这个还有一个的话叫什么？叫 vo 杠什么呀？ 我一杠 cri。 这个的话是叫什么？叫做这一个叫命令行，有物有的啊，命令行爆款。 你好，模块他这个的话主要是做微友介绍的这种什么工程化管理啊，工程化管理。好，那我们现在 这个还用不上，我们明天学那个 wifi 开了之后就可以用到这样一个工具了。好，那除了这个的话，还有一个 ui 框架，就像爱你们的 ui 好，或者说是什么，问他 ui 啊，这种什么叫 ui？ 什么这类什么这类 ui 组间库 这一段主页框的话主要是用于做页面的这个布局，就你自己其实现在做到，其实做到后面啊，大家用框架了之后，其实很少去写这种什么 这种纯的这种 cs 是布局了，基本上我们就用第三方的这种 ui 框架，把它合理的组织起来，然后再做开发，明白吗？好，那除了这个的话，还有像这里面的这个什么维又差，这个的话是干嘛呢？这个是做这个什么集中化 数据管理方案，通过这个的话我们就可以很好的实现这种什么实现组间间的这种什么 眼尖的等通行问题，明白吧？好，除了这个的话，还有像什么 nice 的点介绍，这个的话是做什么？做未有介石的，这个什么未有介石的，这个叫啊？叫这个服务器端券，他主要是为了解决什么？是为了解决这个未有介石 这种什么位于建设单页开发里面啊，就是 sp 开发里面不利于什么不利于 suv 的这个什么这个痛点 啊？就说如果你用微友做单页开发，他是不利于 suv 的，但是我们现在假如说有一些需求，我又要做单页，要做 suv， 那可以用 nice 的这样的一些产品，然后去做，明白吗？ 那这里面的话，除了这个的话，还有像这个无忧什么刚这个什么刚，哎呦，摊牌的啊？刚我的命， 这种什么这种第三方的，这种什么第三方啊？县城的什么县城的这个产品，明白做二开啊，这个也是比较常见的，就是要做二次开发， 就这个东西他是一个成品来的啊，大家到时候可以去查一下，这是个成品，这是个成品的话，其他绝大部分的功能已经提好，就是有了，那你需要在他的上面去加上自己想加的东西，这种东西叫二开，那一般的公司选择这种二开是比较常见的，明白吧？好 大，还有些其他的一些东西啊，那利落你还可以用什么？我有杠我，嗯， aw 一，我上榜， 然后杠这个是是 w p 一下，我上面是微博，好比这种轮播图这东西。明白，好，就上面的这一类啊，就上面的这些东西，上面的这类产品啊， 这类产品我们一般称之。为什么称之为叫未有 gs 的这个什么全家桶， 全家桶啊，啊，就跟大家吃肯德基一样，肯德基不是有全家桶吗？全家桶里面就有各类各样的东西吗？那未有一次各类各样的东西组织起来的，那未有见识的这种价格模式啊，这种组合模式其实就是什么？就是这种什么清内核的模式啊， 叫乌有戒色，乌有戒色他是一个什么？他是一个内核，明白吗？他这个内核的话是属于一种什么？属于一种青内核，就乌有戒色本身他的功能其实是非常有限的， 如果假如说你要用微友开发出来比较强大的功能，你就需要借助他的全家桶，他的全家桶就可以干嘛呢？给你提供这种功能，提供那种功能，那最终你把所有的这些功能全部加起来，他就可以变得什么非常强大。 这个叫微友介绍的全家桶，明白吗？啊？那我们学的这个微友撸特这个的话，他主要是做什么？做这个陆游明白实现这种什么 spa 应用。 好，那我们的话可以去看一下未雨届时的官方啊，他有跟我们列出来，就说这些 全家桶啊，大家点到这个地方，点到这里有个生态系统，看到了吗？生态系统里面大家看点到这里一个工具，工具的话点开了之后我们在这个地方就看这里有个这个东西，大家看这个工具我们就用来的叫第一位猝死，我们是不是做调试的时候，在浏览器的控制台做调试的时候，我们不是用的这个工具吗？ 啊？除了这个工具的话还有一个东西叫 v u e， 然后什么 c l a， 这个的话是做工程化管理的，我们明天学歪歪派克的时候就用这个，然后学了之后他就有一个东西叫 vlog。 vlog 是干嘛的？ vlog 的话就可以把微友的这种什么单文件，就点 vv 的文件，把它编译成一个介绍文件，要工程化，就是讲这个工程化管理了之后你就知道了，这个东西的话是一个加载器，这个加载器他就负责翻译的功能啊，除了这个的话，大家可以看得到我们今天要学的这个微撸，他 路的是干嘛的？维路的的话是做这种路由就是实验单应用。好，这里面还有一个维修差，维修差的话就是做集中化 数据解决方案，这个的话未有这一个什么服务器的炫，就是我们所说的这个东西，就是 nice 的，就是 aust 点介石这个框架，好吧，好，这一类，就这里面大家看到的这一整体这个一些东西，那一般我们把这个东西称为叫未有结实的，什么未有结实的全家桶， 但这个全家桶里面其他还缺些东西啊，像我们常见的这些月框架，他没给我列出来，明白吗？ 那这个也是在开发中也是必不可少的，因为你要做界面嘛。好，所以说呢，大家有的时候去面试的时候，那面试的一些面试官就会问你，他说，哎，你知不知道未有介石的全家桶有没有用过？未有介石里面的全家桶， 或者说你用的那些全家桶有哪一些你要告诉他，明白吗？那你要知道这个全家桶他到底是指了一个什么样的概念？ 这种架构的话，我们刚也给大家讲了，叫清内河，明白吧？就会介绍本身的功能很有限。好，并且大家在这里面，大家看，这里面有个东西叫资源列表，看到了吗？资源列表，这里面有一个涡上，看到了吧？涡上某优衣，你把点开，点开了之后这一个， 这一个，这行仓库啊，其实是蛮有用的，对大家日后做开发很有用，有什么用呢？大家看这个地方啊，他现在是这种英文的，你不好看懂，你把它翻译成中文，翻译成中文了之后，大家大致就可以看得懂，就这里 他输入了跟未有介绍相关的所有的这些资源信息，是官方收集的啊，就说一些比较好的一些东西，他全部给你把它列出来了，就说未有介绍里面，你看，假如说你要做轮播图，你在这里面你就搜一下，看有没有这种什么轮播图好，然后在这边。 好，那你看有没有这种 suvpro 啊？好，好，然后在这里大家看，看，到这里了吗？这里面是不是有一个 vue， 这个什么萨姆斯微博，他是不是就给我们做了一个轮波图，说你如果要说要做后期，你要做轮播图，那这种轮播图你说是自己写吧，那你也不一定写的有他们那么好，那我就干嘛用别人的这种轮播图？官方是不是 告诉了这个东西怎么用？大家看这这里边他是不是焦虑了哦？他说你应该这样用，然后在这里面去注册，注册了之后，然后在这里面然后去用，是不是就教好了？那我是不是就基于他的这个什么他的这个使用 去用，你看下面裂了很多很多很多有用的这些啊？你看你要说要跟微友里面做时间相关的处理，那你在这里面，你看他给你整理出来了这么多有用的工的工具啊，日历相关的，你看全部地图相关的。假如说你要做地图应用，你说微友 做一个什么？做一个单页，做一个什么？做一个送外卖的一个应用，那你肯定要做一个什么？做一个地图。大家做的密室里面不是有那种物流系统吗？那你想做物流系统肯定要做地图吗？那你在这边你看别人给你把全部做好了的 说要做微友做一个什么？做一个啊，在线直播的一个网站，或者说一个点播入播的一个网站，那你看你要用音视频的插件，然后你看无线滚动的插件下拉，然后在这里面你看 很多很多啊，这全部是官方收集的，所以说那大家以后再去做未有开发的时候，你要做某一类开发，你用现代证明去去查找， 看有没有你需求的那一些就是你的要的那些东西，明白吗？如果要的话你直接拿过来用就行了，好不好？好，再来就是我们所说的未有见识全家桶给大家解释一下啊。