# i-vue-frame

> An iframe Solution compatible Vue 2.x and Vue 3.x

Latest version **1.4.15** (published 2021-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install i-vue-frame
pnpm add i-vue-frame
yarn add i-vue-frame
bun add i-vue-frame
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.15 |
| Published | 2021-10-25 |
| First published | 2021-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | joenix |
| Maintainers | joenix |

## Links

- npm: https://www.npmjs.com/package/i-vue-frame
- npm.io page: https://npm.io/package/i-vue-frame

## Dependencies (1)

- [post-bridge](https://npm.io/package/post-bridge.md) ^1.2.3

## Recent versions

- 1.4.15 (latest) — 2021-10-25
- 1.4.14 — 2021-10-25
- 1.4.13 — 2021-09-08
- 1.4.12 — 2021-09-01
- 1.4.11 — 2021-09-01
- 1.4.10 — 2021-09-01
- 1.4.9 — 2021-09-01
- 1.4.8 — 2021-09-01
- 1.4.7 — 2021-09-01
- 1.4.6 — 2021-09-01
- 1.4.5 — 2021-09-01
- 1.4.4 — 2021-08-27
- 1.4.2 — 2021-08-27
- 1.4.1 — 2021-08-27
- 1.4.0 — 2021-08-27
- … 7 more at https://npm.io/package/i-vue-frame/versions

## README

# i-vue-frame

An iframe Solution compatible Vue 2.x and Vue 3.x

## install

```sh
npm i i-vue-frame
# or
yarn add i-vue-frame
```

## init

```js
import iVueFrame from "i-vue-frame";

Vue.use(iVueFrame);
```

## sample use

```vue
<template>
  <i-vue-frame width="100%" height="100%" :css="styles" src="http://localhost:8080/example" />
</template>

<script>
export default {
  data() {
    return {
      styles: {
        aside: "display: none !important;",
        header: "display: none !important;"
      }
    };
  }
};
</script>
```

## frame onload

```vue
<template>
  <i-vue-frame @onload="frameOnloadHook" src="http://localhost:8080/example" />
</template>

<script>
export default {
  methods: {
    frameOnloadHook(iframe) {
      console.log(iframe);
    }
  }
};
</script>
```

## post-message

> use [post-bridge](https://www.npmjs.com/package/post-bridge)

### get message from iframe ( send message in iframe )

```vue
<template>
  <i-vue-frame @emit="emitMessage" src="http://localhost:8080/example" />
</template>

<script>
// in Parent Page

export default {
  methods: {
    emitMessage(data = {}) {
      console.log("Get Message from iFrame", data);
    }
  }
};
</script>
```

> in iFrame, send `emit:message` by `post-bridge`

```vue
<template>
  <button @click="sendMessageToPage">Send Message to Page</button>
</template>

<script>
import { send } from "i-vue-frame/api";

export default {
  methods: {
    sendMessageToPage() {
      send({ key: "sendMessageToPage" });
    }
  }
};
</script>
```

### send message to iframe

> send message to iframe with namespace `emit:custom`

```vue
<template>
  <button @click="sendMessageToIframe">Send Message to iFrame</button>
  <!-- set id on i-vue-frame -->
  <i-vue-frame id="customFrame" src="http://localhost:8080/example" />
</template>

<script>
import { send } from "i-vue-frame/api";

export default {
  methods: {
    sendMessageToIframe() {
      // get frame object by id
      const frame = document.getElementById("frame");

      send({ key: "sendMessageToIframe" }, "emit:custom", frame);
    }
  }
};
</script>
```

> receive message from page with namespace `emit:custom`

```vue
<script>
import { receive } from "i-vue-frame/api";

export default {
  mounted() {
    receive(data => console.log(data), "emit:custom");
  }
};
</script>
```

# !! Cross Domain with Styles

> Add These Code in iFrame

```js
// Import Receive
import { sheet } from "i-vue-frame/api";

// Use Receive
sheet((data, { addCss }) => {
  for (const selector in data) {
    addCss(selector, data[selector]);
  }
});
```

---
_Source: https://npm.io/package/i-vue-frame · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._