本地环境如何修改iframe嵌套的子系统的样式

iframe遵守同源策略,只有父页面与嵌套页面来自同一个域名,两者才能通信。所以首先需要进行同域代理,其次需要了解一下HTMLIFrameElement.contentDocument

1、HTMLIFrameElement.contentDocument

  • 使用这个方法获取页面iframe中的dom对象,注意可能会有下面两种结果:
  • 如果iframe和它的父级在同一个域名下,那么这个方法返回document(是一个嵌套的浏览器上下文环境)
  • 如果iframe和它的父级不在同一个域名下,那么这个方法返回null

所以,修改前提是同域。

对于iframe嵌入的窗口,通过document.getElementById方法或者ref可以拿到该窗口的DOM节点,然后使用contentWindow属性获得iframe节点包含的document对象。

2、在修改为同域后,如何在本地进行样式的调整

  • 举例:
javascript 复制代码
<iframe ref="iframe" :src="accessUrl"></iframe>


1、已经将页面代理到我们产品上(访问某地址即可,/eolink)
data() {
  return {
    accessUrl: `${location.origin}/eolink/template/upstream`
  }
}

2、未将页面代理到我们产品上(需要访问具体url)
mounted() {
  let url = await getSubSystemUrl(); // 返回url
this.accessUrl = url.replace(
      'https://xxxxxxx',
      'http://本地服务启动的地址'
    );
}
  • 在这时候直接访问页面是空白的,再看控制台network
  • 判定没有获取到它的静态资源
  • 修改vue.config.js中的proxy代理前缀iframeurl前缀eolink
js 复制代码
'/eolink': {
  secure: false,
    target: '你服务器的地址',
    // router: () => hotServer(),
    onProxyReq(proxyReq) {
    // 绕过后端的csrf验证
    proxyReq.setHeader('referer', '你服务器的地址');
  }
}
  • 这时候代理成功,已经请求到静态资源了,一般情况下已经可以访问到页面了,如果还没页面显示,可以看看控制台是否有报错
  • 如遇这种404就接着代理/api
  • 那就再给api代理一次
js 复制代码
'/api': {
  secure: false,
    target: '你服务器的地址',
    onProxyReq(proxyReq) {
    proxyReq.setHeader('referer', '你服务器的地址');
  }
  • 如果遇到跨域问题,可以本地起nginx进行代理转发

代码示例

js 复制代码
<template>
  <div class="upstream" v-loading="loading">
    <iframe ref="iframe" :src="accessUrl"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      accessUrl: `${location.origin}/eolink/template/upstream`,
      interval: '',
      loading: true
    };
  },
  async mounted() {
    this.handleIframe();
  },
  methods: {
    handleIframe() {
      const iframe = this.$refs.iframe;
      iframe.style.opacity = 0;
      iframe.onload = () => {
        this.interval = setInterval(() => {
          // 新增样式并插入节点
          const head = iframe.contentWindow.document.querySelector('head');
          const style = iframe.contentWindow.document.createElement('style');
          style.innerHTML = `
            // 修改样式的css
          `;
          head.appendChild(style);

          // 恢复iframe的展示
          this.loading = false;
          iframe.style.opacity = 1;
          clearInterval(this.interval);
        }, 500);
        // 无论页面内容是否加载出来,15秒钟后清除定时器
        setTimeout(() => {
          this.loading = false;
          iframe.style.opacity = 1;
          clearInterval(this.interval);
        }, 15000);
      };
    }
  }
};
</script>

<style lang="less" scoped>
.upstream {
  height: 100%;
  iframe {
    border: none;
    width: 100%;
    height: 100%;
  }
}
</style>
相关推荐
dr李四维12 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_26 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~33 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ36 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z42 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue