---
title: Iframe 插件
sidebar_position: 3
---
## 说明
通过该插件，你可以轻松在 `主页面` 里控制 `iframe` 页面里的播放器。
如在 `主页面` 里通过代码控制 `iframe` 播放器的功能，或者获取 `iframe` 播放器的值等等
## 演示
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
## 安装
### 通过 `npm` 安装：
```bash
$ npm install artplayer-plugin-iframe
```
### 通过 `yarn` 安装：
```bash
$ yarn add artplayer-plugin-iframe
```
### 通过 `script` 安装：
```html
```
然后你可以通过 `window.artplayerPluginIframe` 访问到插件函数
## 使用
### index.html
```html showLineNumbers title="index.html"
ArtPlayer
```
### iframe.html
```html showLineNumbers title="iframe.html"
ArtPlayer
```
## 实例接口
### commit
- 类型: `Function`
将消息推送到 iframe，该函数将在 iframe 内部运行
```js
iframe.commit(() => {
var art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
});
});
iframe.commit(() => {
art.seek = 5;
});
// 获取来自 iframe 的值
(async function () {
// 使用 return 关键词
var currentTime = await iframe.commit(() => {
return art.currentTime;
});
// 或者使用 resolve 方法
var currentTime2 = await iframe.commit((resolve) => {
setTimeout(() => {
resolve(art.currentTime);
}, 1000);
});
})();
```
### message
- 类型: `Function`
接收来自 iframe 的消息
```js
iframe.message((event) => {
console.log(event);
});
```
### destroy
- 类型: `Function`
销毁实例，销毁后无法与 iframe 通信
```js
iframe.destroy();
```
## Iframe 接口
:::danger Tip
`Iframe 接口` 只能运行在 `iframe` 里
:::
### inject
- 类型: `Function`
注入脚本，接收来自实例的消息
```js
ArtplayerPluginIframe.inject();
```
### postMessage
- 类型: `Function`
将消息推送到实例
```js
iframe.message((event) => {
console.log(event);
});
iframe.commit(() => {
ArtplayerPluginIframe.postMessage({
type: 'currentTime',
data: art.currentTime,
});
});
```