1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>聚合浏览器</title>
  6.      <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
  7.      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  8.      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9.  </head>
  10.  <body>
  11.  
  12.  <ul class="nav nav-tabs">
  13.      <li class="active"><a href="https://www.baidu.com/" target="iframe_a">百度</a></li>
  14.      <li><a href="http://m.baidu.com/" target="iframe_a">百度移动端</a></li>
  15.      <li><a href="https://www.sogou.com/" target="iframe_a">搜狗pc端</a></li>
  16.      <li><a href="https://m.sogou.com/" target="iframe_a">搜狗移动端</a></li>
  17.      <li class="dropdown">
  18.          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  19.              聚合浏览器 <span class="caret"></span>
  20.          </a>
  21.          <ul class="dropdown-menu">
  22.              <li><a href="https://dongcongxin.github.io/yueyue/pc" target="iframe_a">百度pc+搜狗移动双屏模式</a></li>
  23.              <li><a href="https://dongcongxin.github.io/yueyue/wraps" target="iframe_a">百度移动+搜狗移动双屏显示</a></li>
  24.              <li><a href="https://dongcongxin.github.io/yueyue/360" target="iframe_a">360pc+360移动双屏显示</a></li>
  25.              <li class="divider"></li>
  26.              <li><a href="#">双击666</a></li>
  27.          </ul>
  28.      </li>
  29.      <li><a href="#">PHP</a></li>
  30.  </ul>
  31.  <iframe src="http://www.baidu.com" name="iframe_a" width="100%" height="680px"></iframe>
  32.  </body>
  33.  </html>

如图：

HTML基础iframe 实现聚合浏览器的更多相关文章

  1. Ipad Safari iframe cookie 当浏览器默认禁用第三方COOKIE

    前一阵子,我们发现高版本的Safari中默认会阻止第三方cookie,如下图所示. 问题 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站X(网站X的域名 ...

  2. js iframe onload &line-height浏览器兼容问题

    1.IE iframe onload事件 在IE下给iframe添加onload事件经常无效,因为在IE下它最多只能被激活一次,而且无论你有多少个iframe,被激活的也只能是最后一个的.可以用下面的 ...

  3. Fiddler基础用法-抓取浏览器数据包

    Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 代理就是在 ...

  4. iframe滚动条充当浏览器滚动条

    在做博客项目的时候,使用了iframe,方便根据选择的文章类别切换显示的内容,但是文章一般都有很多,通过bootstrap的媒体列表的方式显示的话,iframe是一定会出现滚动条的,特别是我添加了一个 ...

  5. 页面中嵌套iframe，微信浏览器长按二维码识别不了

    问题:在微信浏览器内,页面中嵌套iframe,iframe中用户触发事件后有个弹框会显示二维码,用户长按二维码可以识别并跳转.尝试了一下,安卓是正常的,但是ios是识别不了的. 解决过程: 1.这里客 ...

  6. 二、JavaScript语言--JS基础--JavaScript进阶篇--浏览器对象

    1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:

  7. 2、SQL基础整理（聚合函数）

    聚合函数 --求平均 select  AVG(age) as 年龄 from xuesheng select AVG(chinese) as 语文 from xuesheng where class ...

  8. [置顶] js操作iframe兼容各种浏览器

    在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...

  9. （五十九）iOS网络基础之UIWebView简易浏览器实现

    [UIWebView网络浏览器] 通过webView的loadRequest方法可以发送请求显示相应的网站,例如: NSURL *url = [NSURL URLWithString:@"h ...

随机推荐

  1. 对logistic回归分析的两重认识

    logistic回归,回归给人的直观印象只是要求解一个模型的系数,然后可以预测某个变量的回归值.而logistic回归在应用中多了一层含义,它经常应用于分类中.第一重认识:logistic是给真正的回 ...

  2. 冒泡排序算法-python

    冒泡排序:每两个相互比较,总是选出大的相互交换,直至最后选出该列表中最大的数字 def bubbleSort(myList): for i in range(len(myList)-1):#一共进行几 ...

  3. ht-2 arrayList特性

    一.arrayList对象创建 当调用无参构造方法来构造一个ArrayList对象时,它会在内部分配一个初始大小为10的一个Object类型数组, 当添加的数据容量超过数组大小的时候,会产生一个新的数 ...

  4. 让Flash内心崩溃的HTML5历史

    对于HTML5,在今天这个互联网时代,大部分人应该至少都听说过这个名字,或许很多人对HTML5的了解都起于一句话:FLASH杀手. HTML5其实早已不是什么新鲜的事物了,其最初的雏形早在2004年就 ...

  5. [洛谷P3943]:星空（DP+最短路）

    题目传送门 题目背景 命运偷走如果只留下结果, 时间偷走初衷只留下了苦衷.你来过,然后你走后,只留下星空. 题目描述 逃不掉的那一天还是来了,小$F$看着夜空发呆.天上空荡荡的,没有一颗星星——大概是 ...

  6. python判断list中是否包含某个元素

    python判断list中是否包含某个元素 theList = ['a','b','c'] if 'a' in theList: print 'a in the list' if 'd' not in ...

  7. JavaScript中的十种操作符

    ①   一元操作符(参与的只有一个变量) 前置递增递减(语句解析到递增/递减时值就被改变了) 后置递增递减(整个语句执行后值再改变) 递增递减也可用于字符串,布尔值,对象等,结果都将是数值:   ;v ...

  8. unittest测试框架生成可视化测试报告－BeautifulReport

    生成报告的样式: 在说unittest之前,先说几个概念: TestCase 也就是测试用例 TestSuite 多个测试用例集合在一起,就是TestSuite TestLoader是用来加载Test ...

  9. jmeter之图片上传

    用jmeter来实现图片上传请求 目录 1.抓取参数 2.填写参数 1.抓取参数 第一步:先用fiddler抓取上传接口的参数 2.填写参数 第一步:在jmeter的参数列填写没有filename的这 ...

  10. 基于Apache搭建HTTP HTTPS

    参考资料 <openssl攻略>--第一章 <Apache服务器配置与使用工作笔记>-- 第六章 第十四章 https://juejin.im/post/5a31faf2518 ...