CSS笔记——css阿里图标、iframe内联框架

一、css阿里图标

阿里矢量图标库：https://www.iconfont.cn/

要在网页中使用阿里图标，需要先在阿里图标库中选择所需的图标，然后引入相应的 CSS 文件。

以下是具体的引入方式：

在阿里图标库中选择所需的图标，点击右侧的“下载代码”按钮，选择“CSS”格式，下载生成的 zip 文件。

将下载的 zip 文件解压，找到其中的iconfont.css文件，复制该文件到项目的 CSS 文件夹下。

在 HTML 文件中通过 link 标签引入该 CSS 文件。

在 HTML 中使用相应的图标。

icon-xxx 表示图标的名称，可以在 iconfont.css 文件中查看。

注意，有些图标可能需要引入其他的 CSS 文件，比如 iconfont.js 等。在使用时需要根据具体情况进行引入。

另外，阿里图标库提供了 Webfont、Symbol、SVG、PNG、Sketch 等多种格式的图标下载。根据需要选择对应的格式即可。

二、iframe内联框架

iframe 是 HTML 中的内联框架，可以在网页中嵌入另一个页面。

以下是 iframe 的一些常见知识点：

1、src 属性

src 属性用于指定内嵌页面的 URL 地址，也可以是相对地址或者外部链接。当 src 属性改变时，iframe 会重新加载对应的页面。

<iframe src="http://example.com"></iframe>
1

2、width 和 height 属性

width 和 height 属性用于设置 iframe 的宽度和高度。可以使用绝对单位（如像素）或相对单位（如百分比）。

<iframe src="http://example.com" width="600" height="400"></iframe>
1

3、name 属性

name 属性用于指定 iframe 的名称，可以在链接中使用该名称来指定链接的目标页面。

<iframe src="http://example.com" name="myframe"></iframe>
<a href="http://example.com" target="myframe">点击打开链接</a>
1
2

4、scrolling 属性

scrolling 属性用于指定是否显示滚动条。可以设置为 “yes”、“no” 或 “auto”。

<iframe src="http://example.com" scrolling="no"></iframe>
1

5、frameborder 属性

frameborder 属性用于指定是否显示边框。可以设置为 “0” 或 “1”。

<iframe src="http://example.com" frameborder="0"></iframe>
1

6、sandbox 属性

sandbox 属性用于设置 iframe 的沙箱属性，可以限制内嵌页面的行为，提高安全性。

<iframe src="http://example.com" sandbox></iframe>
1

7、allowfullscreen 属性

allowfullscreen 属性用于指定是否允许全屏显示内嵌页面。

<iframe src="http://example.com" allowfullscreen></iframe>
1

JavaScript 操作

可以使用 JavaScript 操作 iframe，比如通过 contentWindow 属性获取内嵌页面的 window 对象，通过 contentDocument 属性获取内嵌页面的 document 对象。

const iframe = document.querySelector('iframe');
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument;
1
2
3

也可以通过 postMessage 方法来跨域通信，从而实现更多功能。

Const iframeWindow = iframe.contentWindow;
iframeWindow.postMessage('message', 'http://example.com');
1
2

8、allow 属性

allow 属性用于指定哪些功能可以在内嵌页面中启用。可以设置多个功能，以逗号分隔。

<iframe src="http://example.com" allow="camera;microphone"></iframe>
1

9、loading 属性

loading 属性用于指定内嵌页面加载时的行为。可以设置为 “eager”（立即加载）或 “lazy”（延迟加载）。

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

内容安全策略

内容安全策略（Content Security Policy，CSP）是一种增强网页安全性的技术。可以使用 CSP 来限制内嵌页面的行为，比如限制其执行 JavaScript。

<iframe src="http://example.com" sandbox="allow-scripts"></iframe>
1

跨域问题

iframe 可以嵌入其他域的页面，但是由于同源策略的限制，内嵌页面无法直接操作父级页面，也无法获取父级页面的信息。需要使用一些技术来解决跨域问题，比如 postMessage、JSONP、CORS 等。

以上是 iframe 的一些常见知识点，可以通过这些知识点来实现各种功能，比如嵌入地图、视频等。需要注意的是，使用 iframe 时需要考虑安全问题，避免出现恶意代码和 XSS 攻击等问题。