HTML中的iframe元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/21/HTML%E4%B8%AD%E7%9A%84iframe%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
HTML 特性
DOM 属性

正文

作用

嵌入其他的网页

HTML 特性

sandbox

为<iframe>中的网页添加限制

注：

若sandbox的值为空字符串，表示启用所有限制
IE9 及以下的浏览器不支持该特性

使用以下关键字可以解除限制：

allow-scripts：允许使用 JavaScript
allow-popups：允许弹窗。例如：target="_blank"、open()
allow-same-origin：允许同源政策检查。如果没有解除该限制，即使两个网页同源，也无法通过同源政策的检查

注意：如果对同源网页使用了allow-scripts和allow-same-origin，那么子页面可以通过 JavaScript 让父页面移除sandbox特性并重新加载子页面，这样所有限制都将被解除

示例：

learn_html/index.html

<!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" />
    <title>Document</title>
  </head>
  <body>
    <h1>Father</h1>
    <iframe
      sandbox="allow-scripts allow-same-origin"
      src="/learn_html/child.html"
      frameborder="0"
    ></iframe>
  </body>
</html>

learn_html/child.html

<!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" />
    <title>Document</title>
  </head>
  <body>
    <h1>hello,world</h1>
    <script>
      let newtab = null;

      window.addEventListener('load', function () {
        const iframe = top.document.querySelector('iframe');
        if (iframe) {
          if (iframe.hasAttribute('sandbox')) {
            // 移除sandbox
            iframe.removeAttribute('sandbox');

            // 重新加载子页面
            iframe.src += '';
          }
        }
      });

      window.addEventListener('click', function () {
        console.log('click');

        newtab = open();
        if (newtab) {
          newtab.addEventListener('DOMContentLoaded', function () {
            console.log('DOMContentLoaded');
          });
          newtab.addEventListener('load', function () {
            console.log('load');
          });
          console.log('end');
        }
      });
    </script>
  </body>
</html>