# 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
```
:::
## `index.html` 接口
### `commit`
从 `index.html` 将消息推送到 `iframe.html`，该函数将在 `iframe.html` 内部运行，同时它也能用于异步获取 `iframe.html` 里的值
```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.html
(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`
在 `index.html` 接收来自 `iframe.html` 的消息
```js
iframe.message((event) => {
console.info(event);
});
```
### `destroy`
销毁后 `index.html` 无法与 `iframe.html` 通信
```js
iframe.destroy();
```
## `iframe.html` 接口
:::warning 提示
`iframe.html` 接口 只能运行在 `iframe.html` 里
:::
### `inject`
注入脚本，接收来自 `index.html` 的消息
```js
ArtplayerPluginIframe.inject();
```
### `postMessage`
将消息推送到 `index.html`
```js
iframe.message((event) => {
console.info(event);
});
iframe.commit(() => {
ArtplayerPluginIframe.postMessage({
type: 'currentTime',
data: art.currentTime,
});
});
```
## 例子
最常遇到的问题是，播放器在 `iframe.html` 里进行网页全屏，但在 `index.html` 是不生效的，这时候只要监听 `iframe.html` 里的 `fullscreenWeb` 事件并通知到 `index.html` 即可
::: code-group
```html [index.html]
ArtPlayer
```
```html [iframe.html]
ArtPlayer
```
:::