vue中嵌入iframe初始化后如何设置iframe中的样式？

Question

两个vue而项目 A 和 B，B以ifram的形式嵌入在A中

在A中访问B是以路由的形式直接访问，再加一个hash参数标识。例如：

http://10.10.10.78/dashboard/index/#type=iframe

这种形式可以直接访问B的页面，因为是嵌入所以要调整一些B的样式，比如侧边栏nav都要隐藏等等。

我的做法是在new Vue之前通过判断hash有没有#type=iframe来判断是不是嵌入的iframe，如果是的话就设置vuex中的isIfram为true代码如下：

// 设置vuex中的值
if (location.hash && location.hash.includes('#/type=iframe') && !store.state.global.isIframe) {
    store.dispatch('global/is_iframe', true)
}
// 页面中需要隐藏的信息
<div :class="classObj" class="app-wrapper">
    ...
    <div class="main-container" :style="{'margin-left': isIframe && 0}">
      <div :class="{'fixed-header':fixedHeader}" v-if="!isIframe">
        ...
      </div>
      <app-main />
    </div>
  </div>

现在的问题是，在用户第一次登陆之后，访问的第一个路由，上面隐藏的内容不生效，其他的一切正常，不管是刷新还是再访问别的路由，都正常，有没有大佬遇到过这种情况，请指点一下！！

Answer 1

我想是因为第一次登录后 访问的地址上没有带上 hash值。

我最近想也在做相关的 iframe嵌入内容
考虑使用一下postMessage 来做通信吧。 基本上可以不使用hash值了
加载时通过postMessage 告知 更新Vuex里的isIframe

上述方法可行性可以自己考量，
第二个方法是 vue里守卫路由 控制 跳转登录及登录后跳转页面不要丢掉url里的hash值

想到的是第三种 iFrame侧项目根据 parent值来决定是否要展示侧栏工具栏或者导航栏

第四种 window === top

Answer 2

页面判断自身是不是在iframe中,直接判断window===window.parent即可.

如果页面是顶层页面,parent指向自身(循环引用);否则,指向父页面;