iframe层问题

昨天被迫在低代码平台上添加脚本(我不理解,低代码平台不是为了方便不写代码为什么还要给它生成的东西添加脚本)

添加的脚本是以iframe窗口形式存在的,另外添加脚本还必须用原生js且不可用<script>标签引用其他组件.另外诸如tab键不可用,ctrl+s不可用等等不方便让我及其暴躁.但是还是要老老实实写代码,又不能不搞.

在这里记录两个东西

1.在当前页面下iframe层不可以直接引入各种组件需要自行在js里面以创建节点操作dom的方式来引入插件(真是好麻烦啊但是还有更麻烦的).在使用的时候也不可以直接拿来用需要在通过window.parent.xxxxx来找到对应的内容然后才可以使用.

function addCss() {
  const head = window.parent.document.getElementsByTagName('head')[0]; // 获取节点
  const body = window.parent.document.getElementsByTagName('body')[0];
  const script = window.parent.document.createElement('script'); // 创建标签
  const script1 = window.parent.document.createElement('script'); //echarts
  script.src = "https://unpkg.com/axios/dist/axios.min.js";
  script1.src = "https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js";
  // script.charset = "utf-8";
  const style = window.parent.document.createElement('style'); // 没错,样式也需要这么引入,不然是无效的,可能是这个平台自己的问题吧
  const css = `
    .infoWindow {
  width: 30rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #022739;
  color: #e0e7ea;
}

.title {
  text-align: center;
  background-color: #09435b;
  font-size: 1rem;
  display: block;
  width: 15rem;
  padding: 0.5rem;
  margin: 1rem auto;
  border-left: 2px solid #2292c1;
  border-right: 2px solid #2292c1;
}

.infoLabel {
  display: flex;
  flex-direction: row;
  justify-content: space-around;;
}
.titleBox{
  display:flex;
  align-items: center;
}
.close{
  font-size: 1.5rem;
  padding: 1rem;
}
.yellow {
  color: #808a46;
}
.libChart{
  width:100%;
  height:200px;
  display: flex;
    justify-content: space-around;
    align-items: center;
}
.margin_0_2r {
  margin: 0 2rem;

    `;
  style.appendChild(window.parent.document.createTextNode(css));
  head.appendChild(style);
  body.appendChild(script);
  body.appendChild(script1);
}
addCss();

 

2.当这个页面作为外链嵌套进其他页面时,如果你想要调用这个页面的方法:

 close = document.getElementsByTagName('iframe')[0].contentWindow.close;

在这里补充两个内容吧,关于iframe和window的

1.window.parent和window.top,window.self

window.top返回当前窗口的最顶层浏览器窗口;当页面嵌套层数只有两层时它和window.parent是一样的(本窗口为最顶级窗口则调用本身)

window.parent,当前窗口的父级window.每一个iframe层都有自己的window所以需要用它来访问父级.(本窗口为最顶级窗口则调用本身)

window.sellf,当前窗口本身.

2.父窗口与iframe层的互相调用

如果iframe层无id/name之类的标识,可以通过index来获取

eg:

   document.getElementsByTagName('iframe')[0]

如果有id或者name,可以通过id/name来获取

window.frames["iframe的name或者id"]

然后就可以把这个iframe作为一个window对象来获取其中的dom元素,但是如果需要调用其中的方法则需要添加contentWindow之后才可以调用iframe里面的script标签内定义的方法对象...

获取父窗口:

window.parent

调用父窗口事件:

window.parent.functionName()

获取父窗口某个元素:

window.parent.document.getElementById("父窗口的元素ID")