携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 

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

需求

我们通过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();

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

坚持努力，无惧未来！