https://github.com/justinsisley/crosstalk.js

Talk to anything from anywhere using postMessage
https://github.com/justinsisley/crosstalk.js

Last synced: about 1 month ago
JSON representation

Talk to anything from anywhere using postMessage

• Host: GitHub
• URL: https://github.com/justinsisley/crosstalk.js
• Owner: justinsisley
• Created: 2015-03-14T04:55:01.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-05-20T21:40:51.000Z (over 9 years ago)
• Last Synced: 2023-04-10T03:11:57.243Z (over 1 year ago)
• Language: JavaScript
• Size: 148 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# crosstalk.js

crosstalk.js is a tiny (2kb minified) library that makes cross-domain and even cross-protocol communication extremely clean and easy.

Why use it? Maybe you distribute an HTML file that will be opened locally (using the file:// protocol), but it needs to talk to an API server (using the http:// or https:// protocol). crosstalk will let you load up a frame from anywhere and communicate through it with ease. The need doesn't come up often, but when it does, this will make your life very easy.

### Using crosstalk

Using crosstalk.js is very easy. You just need to include the library in each page that you're going to communicate between.

In your main window, do something like this:

```

var channel = new Crosstalk({

    // Optional; defaults to '*'

    origin: 'http://mysite.com',

    // Required

    source: 'http://mysite.com/frame.html',

    // Optional; defaults to 50

    connectionTimeout: 150,

    // Optional: defaults to null

    onConnectionFail: function() {

        console.log('Uh oh. We couldn\'t connect...');

    }

});

```

In the window you're communicating with, all you need is this:

```

var channel = new Crosstalk();

```

### Methods

crosstalk doesn't have many methods. You'll pretty much only interact with `on` and `emit`.

##### #on

```

channel.on('someEvent', function() {

    console.log('someEvent fired');

});

// or, use an object...

channel.on({

    'someOtherEvent': function() {},

    'yetAnotherEvent': function() {},

    'anyEventNameYouWant': function() {}

});

// and, you can accept some data

channel.on('awesomeEvent', function(data) {

    console.log(data); // do something with your data

});

```

##### #emit

```

channel.emit('someEvent');

// and, you can pass some data

channel.emit('awesomeEvent', {

    firstName: 'Sue',

    lastName: 'Perman'

});

```

## Browser Support

Until further testing, unknown...

## Coming soon

- Tests