html 菜单点击切换样式，菜单＜a＞ 控制iframe

一.菜单控制iframe，只需要超链接加target

<a id="toCalendar" class="nav-link" href="fullCalendar" target="my_iframe">
1

<iframe id="mainContent" src=""  name="my_iframe" height="550" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" overflow-x="hidden" border="0" security="restricted" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>
1

切换后更换 class类

$("li.nav-item").click(function(){
      $("li.nav-item").removeClass("active");
      $(this).addClass('active');      // 添加当前元素的样式
  })
1
2
3
4

二.iframe的属性

iframe的属性如下。

allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持，请参考相关的 JavaScript 教程。

frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。

src：嵌入的网页的 URL。

width：显示区域的宽度。

height：显示区域的高度。

sandbox：设置嵌入的网页的权限，详见下文。

importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。

name：内嵌窗口的名称，可以用于 a、form、base 的target属性。

referrerpolicy：请求嵌入网页时，HTTP 请求的Referer字段的设置。参见 a 标签的介绍。

security: 关于安全，利用iframe能够嵌入第三方页面

1、sandbox 属性

嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制 iframe 的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。

sandbox可以当作布尔属性使用，表示打开所有限制。

<iframe src="https://www.example.com" sandbox>
</iframe>
1
2

sandbox属性可以设置具体的值，表示逐项打开限制。未设置某一项，就表示不具有该权限。

allow-forms：允许提交表单。

allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。

allow-popups：允许嵌入的网页使用window.open()方法弹出窗口。

allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。

allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。

allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。

allow-presentation：允许嵌入的网页使用 Presentation API。

allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。

allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。

allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。

allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。

allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。

allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

注意，不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。

2、loading 属性

iframe指定的网页会立即加载，有时这不是希望的行为。iframe滚动进入视口以后再加载，这样会比较节省带宽。

loading属性可以触发iframe网页的懒加载。该属性可以取以下三个值。

auto：浏览器的默认行为，与不使用loading属性效果相同。

lazy：iframe的懒加载，即将滚动进入视口时开始加载。

eager：立即加载资源，无论在页面上的位置如何。

<iframe src="https://example.com" loading="lazy"></iframe>
1

上面代码会启用 iframe的懒加载。

有一点需要注意，如果iframe是隐藏的，则loading属性无效，将会立即加载。只要满足以下任一个条件，Chrome 浏览器就会认为iframe是隐藏的。

iframe的宽度和高度为4像素或更小。

样式设为display: none或visibility: hidden。

使用定位坐标为负X或负Y，将iframe放置在屏幕外。