iframe-关闭左侧-关闭右侧-关闭其它-关闭全部

公司一个后台项目里边嵌套的是iframe，以前老的后台模板多窗口的一般都是这种解决方式，经理让把关闭左侧，关闭右侧，关闭其它，关闭全部安排上

写在前边，项目用的vue2.x+element1.x，多入口，比较古老。你敢相信js代码不写到.vue文件里边，而是写到入口文件.js里边，直接在这个文件里边操作dom，关于iframe和上边窗口标签的操作全部在这个文件里。说实话来这个公司之前我还真不知道有这种骚操作。想要实现如题所说的功能，如果想用vue的虚拟dom操作，会改很多东西。于是将错就错吧。是的，我想说，我也直接操作dom了，就是这么low。开搞

ps 公司项目的element是1.x具体代码请相应替换。

首先把element的Dropdown引入，实现如下图效果

//.js
Vue.use(Dropdown) 
Vue.use(DropdownMenu) 
Vue.use(DropdownItem)

//.vue
<el-dropdown  @command="handleClick">
    <span class="el-dropdown-link">
      更多操作<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="left">关闭左侧</el-dropdown-item>
      <el-dropdown-item command="right">关闭右侧</el-dropdown-item>
      <el-dropdown-item command="other">关闭其它</el-dropdown-item>
      <el-dropdown-item command="all">关闭全部</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

逻辑实现 直接上代码吧

handleClick(command){
  // debugger
  const activeUrl=document.querySelector('#tabList .active').getAttribute('data-url'),
        tabList = document.getElementById('tabList').getElementsByTagName('li'),
        iframes = document.getElementById('iframeContent').getElementsByTagName('iframe');
  let tabLength=tabList.length,iframesLength=iframes.length;
  if(command=='right'){
    for (let i = tabLength - 1; i >= 0; i--) {
      if (tabList[i].getAttribute('data-url') === activeUrl) {
        break
      }
      tabList[i].remove()
    }
    for (let i = iframesLength-1; i >= 0; i--) {
      if (iframes[i].getAttribute('data-url') === activeUrl) {
        break
      }
      iframes[i].remove()
    }
  }
  if(command=='left'){
    for (let i = 1; i <tabLength; i) {
      if (tabList[i].getAttribute('data-url') === activeUrl) {
        break
      }
      tabList[i].remove()
    }
    for (let i=1; i < iframesLength; i) {
      if (iframes[i].getAttribute('data-url') === activeUrl) {
        break
      }
      iframes[i].remove()
    }
  }
  if(command=='other'){
    for (let i = tabLength - 1; i > 0; i--) {
      if (tabList[i].getAttribute('data-url') === activeUrl) {
        continue
      }
      tabList[i].remove()
    }
    for (let i = iframesLength-1; i > 0; i--) {
      if (iframes[i].getAttribute('data-url') === activeUrl) {
        continue
      }
      iframes[i].remove()
    }
  }
  if(command=='all'){

    for (let i = tabList.length - 1; i >0; i--) {
      tabList[i].remove()
    }
    for (let i = iframes.length - 1; i >0; i--) {
      iframes[i].remove()
    }
    tabList[0].classList.add('active')
    iframes[0].classList.remove('hide')
  }
}

getElementsBy。。。关于这些东西，现在的很多小朋友都没怎么用过吧，在vue和react出来之前，一天写多少这东西（暴露了我的年龄），俗称：dom操作

有个坑说下，getElementsBy是动态的，意思就是你删除一个，他也相应的删掉一个，如果直接正常循环操作会出问题的，具体的可以看看上边代码中的几个循环。关于这个坑，老司机都知道吧，是不是勾起了你的回忆。