https://github.com/sidp/iframes

Gives an iframe control of its parent window.
https://github.com/sidp/iframes

Last synced: 6 days ago
JSON representation

Gives an iframe control of its parent window.

• Host: GitHub
• URL: https://github.com/sidp/iframes
• Owner: sidp
• License: mit
• Created: 2018-02-23T10:13:32.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-15T09:54:03.000Z (over 6 years ago)
• Last Synced: 2024-12-05T20:06:00.997Z (23 days ago)
• Language: TypeScript
• Size: 67.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @sidp/iframes

Give control of the parent window in an iframed page. Works cross-domain by utilizing the postMessage API. It is under development and things might still break.

## API

In the parent document:

```html

```

```js

import { setup } from '@sidp/iframes';

const iframe = setup(document.getElementById('iframe'));

```

In the iframed document:

```js

import { parentWindow, iframe } from '@sidp/iframes';

```

The `parentWindow` object contains functions referring to the parent window and and `iframe` contains functions referring ot the iframe element in the parent document.

### Set the scroll position

```js

parentWindow.scrollTo(x, y);

```

The arguments must be provided as numbers. They are interpreted as pixel values.

### Get the scroll position

Get the current scroll position of the parent window. The returned number is a pixel value. The functions take no arguments.

```js

parentWindow.scrollX(); // -> 0

parentWindow.scrollY(); // -> 0

```

### Get and set the size of the iframe

Get and set the height and width of the iframe. Numbers are interpreted as pixels and strings as css values.

```js

iframe.height(); // -> 620

iframe.height('100vh');

```

### Position of the iframe in the parent document

The following functions return the position of the iframe in the parent document. The returned number is a pixel value. The functions take no arguments.

```js

iframe.top() // -> 360

iframe.left() // -> 16

iframe.right() // -> 16

iframe.bottom(): // -> 840

```

The following funtions return the position of the iframe relative to the viewport. The returned number is a pixel value. The functions take no arguments.

```js

iframe.viewport.top(); // -> 100

iframe.viewport.left(); // -> 16

iframe.viewport.right(); // -> 16

iframe.viewport.bottom(); // -> 200

```

### Listen to events (not implemented yet)

In the parent document:

```js

import { setup } from '@sidp/iframes';

const iframe = setup(document.getElementById('iframe'));

iframe.on('resize', ({ width, height }) => {

	console.log('the iframe resized itself', width, height);

});

iframe.on('scroll', ({ x, y }) => {

	console.log('iframe scrolled the window to', x, y);

});

```

In the iframed document:

```js

import { parent, iframe } from '@sidp/iframes';

parent.on('init', () => {

	console.log(

		'The parent document initialized the iframe script for this iframe'

	);

});

```