Vue嵌入式页面解决方案

本文涉及的产品
.cn 域名,1个 12个月
简介: Vue嵌入式页面解决方案

在工作中我们偶尔用到一些嵌入式页面,也就是在当前页面中引入非本项目的页面,我近几天遇到这个问题,说一下自己的解决方法

需求

我们通过home页面中的一个按钮跳转到index页面,index页面中拥有自己的数据和包含了一个内嵌的页面,这个内嵌的页面是其他域名下的页面,我们需要通过传递参数使得内嵌的页面渲染对应数据并和当前页面合并为一个页面

iframe解决方案

页面结构

<div id="app">
   <iframe :src="iframeURL" width="100%" height="100%"></iframe>
 <div>
   当前页面数据
 </div>
 </div>

逻辑

mounted() {
  this.iframeURL=this.$router.query.url+携带的参数
  }

优缺点

使用iframe引入可以让页面直接呈现,官方提供一些方法让我们可以操作iframe内部元素,但是这些方法仅用于当前域名下的同域名页面,我们在工作中一般不会把所有东西都放在同一域名下,所以一定会出现非同域名下的页面,如果我们使用了非同域名下的页面就会出现一个问题,那就是无法操作页面内部的元素,同时也无法通过外部的方式给内嵌的页面添加点击事件或者动态的修改样式

采用ifranme标签网上最多的解决方案是在内嵌页面中增加一些页面通讯的方法,但是我们这个内嵌页面是需要引入到很多地方的,采用页面通讯方法,每次增加引入地方都需要对内嵌页面增加对应的操作代码,过于繁琐

所以我就想到了我目前所用的方法,请求结合innnerHTML方法

请求结合innerHTML解决方案

通过元素的AJAX对象创建一个get请求去请求所需要的页面,使用原生的innerHTML方法插入到当前页面中,就能通过原生的document方法去操作内嵌页面的元素

页面结构

<div id="app">
   <div id="proApp"></div>
 <div>
   当前页面数据
 </div>
 </div>

逻辑

//创建AJAX对象
const xhr = new XMLHttpRequest();
//当请求状态发生改变触发
      xhr.onreadystatechange = () => {
      //状态为4则是请求已经请求回来了,由于状态码每个项目定义的不同,我们这里就不做判断
        if (xhr.readyState == 4) {
        //获取到接收内嵌页面的元素,通过innerHTML进行渲染后端返回的数据
          document.getElementById("proApp").innerHTML = xhr.responseText;
          //渲染后操作
        }
      };
      //创建请求
      xhr.open("GET", this.$router.query.url+携带的参数, true);
        //发送请求
      xhr.send();

我在网上查找了好几种方案,不过对于我当前项目并不是很适合,这是我想出来目前对于我当前项目最为合适的方案,欢迎大家提出其他解决方案!

坚持努力,无惧未来!


相关文章
|
6天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
6天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
6天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
11天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
11天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
343 0
work02_vue页面打印水印
|
11天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
12天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
12天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
12天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
下一篇
无影云桌面