first commit
This commit is contained in:
15
iframe-resizer-master/docs/iframed_page/events.md
Executable file
15
iframe-resizer-master/docs/iframed_page/events.md
Executable 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](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/methods.md) during page load, then they should be called from this event handler.
|
78
iframe-resizer-master/docs/iframed_page/methods.md
Executable file
78
iframe-resizer-master/docs/iframed_page/methods.md
Executable 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
|
||||
}
|
||||
```
|
28
iframe-resizer-master/docs/iframed_page/options.md
Executable file
28
iframe-resizer-master/docs/iframed_page/options.md
Executable 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 mimicking 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.
|
Reference in New Issue
Block a user