乐趣区

关于html:本篇还玩障眼法一文解读HTML内联框架Iframes

jiezi

写在开篇

假如有一个需要，想要在网页内显示其它网页，怎么搞？很简略，能够用 iframe 来解决，那啥是 iframe？本篇的主题就是它，接下来咱们一一解剖它的用法。

嵌入第三方 url 页面

咱们先来两个测试场景，比照一下，啥场景呢？就是可被嵌入的页面和不可被嵌入的页面。

上面这 2 个页面是不可被嵌入的

  • 嵌入 python 的官网主页 

    <!DOCTYPE html>
<html lang="zh">
  <head>
      <meta charset="UTF-8">
      <title> 彩虹运维技术栈社区主页 </title>
  </head>
  <body>
      <iframe src="https://www.python.org/"></iframe>
  </body>
</html>

    成果如下图：

  • 嵌入百度主页 

    <!DOCTYPE html>
<html lang="zh">
  <head>
      <meta charset="UTF-8">
      <title> 彩虹运维技术栈社区主页 </title>
  </head>
  <body>
      <iframe src="https://www.baidu.com/"></iframe>
  </body>
</html>

成果如下：

上面这 2 个 https 的页面是可被嵌入的

  • 嵌入 zabbix 官网的主页 

    <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title> 彩虹运维技术栈社区主页 </title>
</head>
<body>
  <iframe src="https://www.zabbix.com/cn/"></iframe>
</body>
</html>

    成果如下图：

  • 嵌入 prometheus 官网主页 
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <iframe src="https://prometheus.io/"></iframe>
    </body>
</html>

成果如下图：

好了，测试完下面的两个场景，当初就产生一个疑难了。为什么有的页面能够被嵌入？而有的页面不能被嵌入呢？答案就是：同源策略的限度所致，第三方的 web 服务器端并没有容许 iframe 的拜访，这就是外围问题之所在。

对于同源策略、以及什么是跨域拜访、cookie 重写等等这些知识点，当前笔者都会抽时间缓缓给大家逐个分析哈！咱们目前阶段的主题是放在 html 中，后续就是 css、js，而后就是前端框架 vue.js，甚至中途还会讲讲 Go、Python 方面的常识，Web 框架等等。

嵌入本地的页面

小栗子，咱们在 home.html 页面中嵌入本地 test.html 页面

  • home.html

    <!DOCTYPE html>
<html lang="zh">
  <head>
      <meta charset="UTF-8">
      <title> 彩虹运维技术栈社区主页 </title>
  </head>
  <body>
      <iframe src="./test.html" style="height:200px;width:700px;" title="TtrOpsStack" ></iframe>
  </body>
</html>

  • test.html

    <!DOCTYPE html>
<html lang="zh">
  <head>
      <meta charset="UTF-8">
      <title> 运维开发工程师，攻破前端技能。</title>
  </head>
  <body>
      <h1 id="WeChatPublicID"> 点击查看彩虹运维技术栈社区的微信公众号 </h1>
      <button onclick="dis_wechat_public_id()"> 速度点击查看 </button>
      <script>
          function dis_wechat_public_id() {document.getElementById("WeChatPublicID").innerHTML = "微信公众号 ID：TtrOpsStack"
          }
      </script>
  </body>
</html>

    成果如下图：

留神到了嘛？在 home.html 文件的代码中，iframe 的 src 属性只须要指向本地的 html 文件门路即可，且在用 style 中还设置了 CSS 属性的高度和宽度哦！

玩个“障眼法”

什么是“障眼法”？这是笔者对上面小栗子的一个形容词罢了。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 彩虹运维技术栈社区主页 </title>
    </head>
    <body>
        <iframe src="https://apache.org/" style="border:none;height:2000px;width:2000px;" title="TtrOpsStack"></iframe>
    </body>
</html>

成果如下图：

看到下面的成果了嘛？真真假假，假假真真，不晓得的还认为是真的间接拜访了 apache 的官网呢，鬼晓得两头还隔了一道中间商。为啥会呈现这样的障眼法呢？起因就是 style 中的 CSS 属性 border 在搞鬼，它的值为 none，也就是去掉边框的意思。再把宽度和高度调大，撑满整个页面，这个障眼法的成果就进去了。是不是很好玩呢？

写在最初

好了，本篇解说的 HTML iframe 知识点就这么欢快的完结了。一个很小的知识点，虽不起眼，但它却是能让咱们在将来能够学透更下层技能的根底。还是那句话，根底不牢，地动山摇呀！技能这货色，有时候不仅要向上学，还要向下学，甚至是上下结合的学习。把根底和原理常识打牢，当学习更下层技能时候才会更容易的去了解。有的组件、技能看似热门、高端，其实都是从根底的货色演变而来的，所以，不论是哪个技术畛域，基础知识和原理常识的重要性是可想而知了吧？

本文转载于（喜爱的盆友关注咱们）：

https://mp.weixin.qq.com/s/0O…

退出移动版