first commit

This commit is contained in:
aschwarz
2023-04-25 13:25:59 +02:00
commit 086d1e1e9e
1774 changed files with 396049 additions and 0 deletions

View File

@ -0,0 +1,15 @@
## IFrame Page Events
The following events can be included in the [options](options.md) object attached to the iframed page.
### onMessage
type: function (message)
Receive message posted from the parent page with the `iframe.iFrameResizer.sendMessage()` method.
### onReady
type: function()
This function is called once iFrame-Resizer has been initialized after receiving a call from the parent page. If you need to call any of the parentIFrame methods (See below) during page load, then they should be called from this event handler.

View File

@ -0,0 +1,78 @@
## IFrame Page Methods
These methods are available in the iFrame via the `window.parentIFrame` object. These method should be contained by a test for the `window.parentIFrame` object, in case the page is not loaded inside an iFrame. For example:
```js
if ('parentIFrame' in window) {
parentIFrame.close();
}
```
### autoResize([bool])
Turn autoResizing of the iFrame on and off. Returns bool of current state.
### close()
Remove the iFrame from the parent page.
### getId()
Returns the ID of the iFrame that the page is contained in.
### getPageInfo(callback || false)
Ask the containing page for its positioning coordinates. You need to provide a callback which receives an object with the following properties:
* **iframeHeight** The height of the iframe in pixels
* **iframeWidth** The width of the iframe in pixels
* **offsetLeft** The number of pixels between the left edge of the containing page and the left edge of the iframe
* **offsetTop** The number of pixels between the top edge of the containing page and the top edge of the iframe
* **scrollLeft** The number of pixels between the left edge of the iframe and the left edge of the iframe viewport
* **scrollTop** The number of pixels between the top edge of the iframe and the top edge of the iframe viewport
* **documentHeight** The containing document's height in pixels (the equivalent of `document.documentElement.clientHeight` in the container)
* **documentWidth** The containing document's width in pixels (the equivalent of `document.documentElement.clientWidth` in the container)
* **windowHeight** The containing window's height in pixels (the equivalent of `window.innerHeight` in the container)
* **windowWidth** The containing window's width in pixels (the equivalent of `window.innerWidth` in the container)
* **clientHeight** (deprecated) The height of the containing document, considering the viewport, in pixels (`max(documentHeight, windowHeight)`).
* **clientWidth** (deprecated) The width of the containing document, considering the viewport, in pixels (`max(documentWidth, windowWidth)`).
Your callback function will be recalled when the parent page is scrolled or resized.
Pass `false` to disable the callback.
### scrollTo(x,y)
Scroll the parent page to the coordinates x and y.
### scrollToOffset(x,y)
Scroll the parent page to the coordinates x and y relative to the position of the iFrame.
### sendMessage(message,[targetOrigin])
Send data to the containing page, `message` can be any data type that can be serialized into JSON. The `targetOrigin` option is used to restrict where the message is sent to; to stop an attacker mimicking your parent page. See the MDN documentation on [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) for more details.
### setHeightCalculationMethod(heightCalculationMethod)
Change the method use to workout the height of the iFrame.
### size ([customHeight],[ customWidth])
Manually force iFrame to resize. This method optionally accepts two arguments: **customHeight** & **customWidth**. To use them you need first to disable the `autoResize` option to prevent auto resizing and enable the `sizeWidth` option if you wish to set the width.
```js
iFrameResize({
autoResize: false,
sizeWidth: true
});
```
Then you can call the `size` method with dimensions:
```js
if ('parentIFrame' in window) {
parentIFrame.size(100); // Set height to 100px
}
```

View File

@ -0,0 +1,28 @@
## IFrame Page Options
The following options can be set from within the iFrame page by creating a `window.iFrameResizer` object before the JavaScript file is loaded into the page.
```html
<script>
window.iFrameResizer = {
targetOrigin: 'https://mydomain.com'
}
</script>
<script src="js/iframeresizer.contentwindow.js"></script>
```
### targetOrigin
default: '*'
type: string
This option allows you to restrict the domain of the parent page, to prevent other sites mimicing your parent page.
### heightCalculationMethod / widthCalculationMethod
default: null
type: string | function() { return integer }
These options can be used to override the option set in the parent page (See above for details on available values). This can be useful when moving between pages in the iFrame that require different values for these options.
Altenatively you can pass a custom function that returns the size as an integer. This can be useful when none of the standard ways of working out the size are suitable. However, normally problems with sizing are due to CSS issues and this should be looked at first.