vue+bootstrap模仿浏览器多tab和iframe打开网页效果代码-html代码-BFW代码库

vue+bootstrap模仿浏览器多tab和iframe打开网页效果代码

代码语言：html

所属分类：选项卡

代码描述：vue+bootstrap模仿浏览器多tab和iframe打开网页效果代码，多个tab管理不同的iframe,可以新增还可以删除，输入网址在当前iframe中打开网页，注意有些网址屏蔽了iframe中打开。

代码标签： vue bootstrap 模仿浏览器多 tab iframe 打开网页

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
  <!-- Bootstrap CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  <title>IFrame Tabs Browser</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container mt-3">
      <div class="d-flex">
        <ul class="nav nav-tabs flex-grow-1">
          <li class="nav-item" v-for="(tab, index) in tabs" :key="tab.id">
            <a :class="['nav-link', { active: index === activeTabIndex }]" @click="switchTab(index)" href="#">
              Tab {{ index + 1 }}
              <span class="ml-2 badge badge-danger" @click.stop="closeTab(index)">&times;</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" @click="addTab()" href="#">+</a>
          </li>
        </ul>
      </div>
.........完整代码请登录后点击上方下载按钮下载查看