x-frame

KO | EN

gitlite — search

#hacktoberfest #react #typescript #llm #go #android #deep-learning #linux #nodejs #cli #vue #pytorch #ios #mcp

(★ 8)

Cross document communication with frame content made easy

x-frame 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# \<x-frame\>

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://beta.webcomponents.org/element/vpusher/x-frame)

Cross document communication with frame content made easy.

Example:

```html
<x-frame src="demo/frame.html"></x-frame>
<script>
  document.querySelector('x-frame').addEventListener('msg', function(e){
    alert(e.detail.data.message)
  });
</script>
```

## Installation

First, make sure you have [Bower](https://bower.io/) and the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed.

Then,

```
bower install
polymer serve -o
```

## Usage

Add a `<x-frame>` element to your page and set the `src` attribute:

```html

[...]

<x-frame src="frame.html" on-msg="onMessageFromFrame"><x-frame>
```

The target page (here `frame.html`) needs to contain at least one `<x-framed>` element to enable the cross document communication:

```html

[...]

<x-framed on-msg="onMessageFromParent"><x-framed>
```

The frame document can also contain more than one `<x-framed>` element to allow multi-channels cross document communication:

```html

[...]

<x-framed on-msg="onMessageForUsers" channel="user"><x-framed>
<x-framed on-msg="onMessageForData" channel="data"><x-framed>
```

> This is helpful for the separation of concerns.

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## History

* **1.0.0:** initial release.

## License

MIT license

x-frame

x-frame 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

x-frame

x-frame 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README