# Iframe 控制
## 说明
通过该插件，你可以轻松在 `index.html` 里控制跨域 `iframe.html` 页面里的播放器，如在 `index.html` 里通过代码控制 `iframe.html` 播放器的功能，或者获取 `iframe.html` 播放器的值
## 演示
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
## 安装
::: code-group
```bash [npm]
npm install artplayer-plugin-iframe
```
```bash [yarn]
yarn add artplayer-plugin-iframe
```
```bash [pnpm]
pnpm add artplayer-plugin-iframe
```
```html [script]
```
:::
## `CDN`
::: code-group
```bash [jsdelivr.net]
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
```
```bash [unpkg.com]
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
```
:::
## 使用
::: code-group
```html [index.html]
ArtPlayer
```
```html [iframe.html]
ArtPlayer
```
:::
## 实例接口
### `commit`
将消息推送到 iframe，该函数将在 iframe 内部运行
```js
iframe.commit(() => {
var art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
});
});
iframe.commit(() => {
art.seek = 5;
});
// Get the value from the iframe
(async function () {
// Use the return keyword
var currentTime = await iframe.commit(() => {
return art.currentTime;
});
// or use the resolve method
var currentTime2 = await iframe.commit((resolve) => {
setTimeout(() => {
resolve(art.currentTime);
}, 1000);
});
})();
```
### `message`
接收来自 iframe 的消息
```js
iframe.message((event) => {
console.info(event);
});
```
### `destroy`
销毁实例，销毁后无法与 iframe 通信
```js
iframe.destroy();
```
## `Iframe` 接口
:::warning 提示
`Iframe` 接口 只能运行在 `iframe` 里
:::
### `inject`
注入脚本，接收来自实例的消息
```js
ArtplayerPluginIframe.inject();
```
### `postMessage`
将消息推送到实例
```js
iframe.message((event) => {
console.info(event);
});
iframe.commit(() => {
ArtplayerPluginIframe.postMessage({
type: 'currentTime',
data: art.currentTime,
});
});
```