https://github.com/steamerjs/steamer-cross

cross domain communication util
https://github.com/steamerjs/steamer-cross

Last synced: about 1 month ago
JSON representation

cross domain communication util

• Host: GitHub
• URL: https://github.com/steamerjs/steamer-cross
• Owner: steamerjs
• Created: 2014-10-14T07:12:51.000Z (about 10 years ago)
• Default Branch: v2.0.0
• Last Pushed: 2016-08-09T04:58:40.000Z (over 8 years ago)
• Last Synced: 2024-04-14T22:23:30.923Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 74.2 KB
• Stars: 6
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## steamer-cross

cross domain communication for development

## Features

* Bi-drectional communication

	- parent can send/broadcast message to children

	- chidren can send/broadcast message to parent and other children

* Chaining method

	- ie, cross.register().send()

* Iframe And New Window Supported

	- IE8 - IE9 may have problems in new window communication

* Exclude Support For IE6 and IE7

## Usage

### Parent Send Message to Children

#### Send message to specific child

```

var cross = new Cross('project1', 'parent');

cross.register('iframe1', document.getElementById('iframe1').contentWindow);

cross.send('iframe1', "hello ifram1, from parent");

```

#### Broadcast message to all children

```

var cross = new Cross('project1', 'parent');

// chaining methods

var window1 = window.open('./window1.html');

cross.register('iframe1', document.getElementById('iframe1').contentWindow)

	 .register('iframe2', document.getElementById('iframe2').contentWindow)

	 .register('window1', window1);

cross.broadcast("broadcast message, from parent");

```

#### Listen to message

```

var cross = new Cross('project1', 'iframe1');

cross.listen(function(msg, event) {

	// do something here

});

```

#### Clear registration

```

// unregister specific child

var cross = new Cross('project', 'parent');

cross.register('iframe1', document.getElementById('iframe1').contentWindow);

cross.unregister('iframe1');

// unregister all children

cross.unregister();

```

### Child Send Message to Parent or Other Children

#### Send message to parent

```

var cross = new Cross('project', 'iframe1');

// if current window is iframe, use window.parent as parent reference

cross.register('parent', window.parent)

      send('parent', 'hello parent, from iframe1');

```

#### Send message to specific child

```

var cross = new Cross('project', 'window1');

// if current window is a new window, use window.opener as parent reference

cross.register('parent', window.opener)

	 .send('iframe2', 'hello ifram2, from iframe1');

```

The child which receives message from another child may not know which child send this message to it.

the `event` parameter in `cross.listen` function only contains parent's information. Therefore, if you hope to identify the actual source, you may include the sourcing information in your message like following:

```

var cross = new Cross('project', 'window1');

cross.register('parent', window.opener)

	 .send('iframe2', JSON.stringify({content: 'hello ifram2, source: 'iframe1'}), from iframe1');

```

#### Broadcast message to parent and all children

```

var cross = new Cross('project', 'iframe1');

cross.register('parent', window.parent)

	 .broadcast('broadcast from iframe1, project1');

```

## Demo

Please checkout the repo, and take a look at `test` folder