https://github.com/surjikal/iframe-communicator

Crude API for parent-iframe communication
https://github.com/surjikal/iframe-communicator

Last synced: about 2 months ago
JSON representation

Crude API for parent-iframe communication

• Host: GitHub
• URL: https://github.com/surjikal/iframe-communicator
• Owner: surjikal
• Created: 2012-08-15T02:12:50.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-08-23T00:12:56.000Z (over 12 years ago)
• Last Synced: 2024-04-16T00:57:57.354Z (8 months ago)
• Language: CoffeeScript
• Homepage:
• Size: 93.8 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Iframe Communicator

Sane API for communication between an iframe and its parent. This is useful for phonegap development,

as it allows you access a phone's hardware from a remote website.

The inspiration for this project came from:

http://hackerluddite.wordpress.com/2012/04/15/getting-access-to-a-phones-camera-from-a-web-page/

It's written in CoffeeScript. If you want it in JavaScript, just compile it ;)

## Usage example

### parent.jade

```jade

!!!

html

    head

        script(type="text/javascript", charset="utf-8", src="js/cordova-2.0.0.js")

        script(type="text/javascript", charset="utf-8", src="js/iframe-communicator.js")

        link(rel='stylesheet', href="css/style.css")

    body

        iframe#remote-site(src='')

    :coffeescript

        REMOTE_URL = "http://example.com"

        IFRAME_ID = 'remote-site'

        document.addEventListener 'deviceready', ->

            communicator = new IFrameCommunicator()

            communicator.initializeParent REMOTE_URL, IFRAME_ID, ->

                communicator.addMessageListener 'camera', (message, done) ->

                    cameraOptions =

                        quality: 50,

                        destinationType: Camera.DestinationType.DATA_URL,

                        targetWidth: 640,

                        targetHeight: 640

                    onSuccess = (imageData) ->

                        done null, imageData

                    onError = (message) ->

                        done message

                    navigator.camera.getPicture onSuccess, onError, cameraOptions

            iframe = document.getElementById IFRAME_ID

            iframe.src = REMOTE_URL

```

### remote.jade

```jade

!!!

html

    head

        script(type="text/javascript", src="js/jquery.min.js")

        script(type="text/javascript", charset="utf-8", src="js/iframe-communicator.js")

    body

        h1 Testing thing thing out...

        button#picture(type="button") Take a picture!!

        .content

    :coffeescript

        REMOTE_URL = "file://"

        $ ->

            communicator = new IFrameCommunicator()

            communicator.initializeIframe REMOTE_URL

            $('#picture').click ->

                alert 'Clicked button!'

                communicator.postMessage 'camera', (err, imageData) ->

                    return alert 'Something went wrong while getting the picture.' if err

                    $image = $('')

                    $('.content').prepend $image

                    $image.attr 'src', 'data:image/jpg;base64,' + imageData

```