` will be\n passed to the HTML element, allowing you set the `className`, `style`, etc.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n console.log('Inview:', inView)}>\n Plain children are always rendered. Use onChange to monitor state.
\n \n );\n\n export default Component;\n ```\n */\nexport class InView extends React.Component<\n IntersectionObserverProps | PlainChildrenProps,\n State\n> {\n static displayName = 'InView';\n static defaultProps = {\n threshold: 0,\n triggerOnce: false,\n initialInView: false,\n };\n\n constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n super(props);\n this.state = {\n inView: !!props.initialInView,\n entry: undefined,\n };\n }\n\n componentDidUpdate(prevProps: IntersectionObserverProps) {\n // If a IntersectionObserver option changed, reinit the observer\n if (\n prevProps.rootMargin !== this.props.rootMargin ||\n prevProps.root !== this.props.root ||\n prevProps.threshold !== this.props.threshold ||\n prevProps.skip !== this.props.skip ||\n prevProps.trackVisibility !== this.props.trackVisibility ||\n prevProps.delay !== this.props.delay\n ) {\n this.unobserve();\n this.observeNode();\n }\n }\n\n componentWillUnmount() {\n this.unobserve();\n this.node = null;\n }\n\n node: Element | null = null;\n _unobserveCb: (() => void) | null = null;\n\n observeNode() {\n if (!this.node || this.props.skip) return;\n const {\n threshold,\n root,\n rootMargin,\n trackVisibility,\n delay,\n fallbackInView,\n } = this.props;\n\n this._unobserveCb = observe(\n this.node,\n this.handleChange,\n {\n threshold,\n root,\n rootMargin,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n }\n\n unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n this._unobserveCb = null;\n }\n }\n\n handleNode = (node?: Element | null) => {\n if (this.node) {\n // Clear the old observer, before we start observing a new element\n this.unobserve();\n\n if (!node && !this.props.triggerOnce && !this.props.skip) {\n // Reset the state if we get a new node, and we aren't ignoring updates\n this.setState({ inView: !!this.props.initialInView, entry: undefined });\n }\n }\n\n this.node = node ? node : null;\n this.observeNode();\n };\n\n handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {\n if (inView && this.props.triggerOnce) {\n // If `triggerOnce` is true, we should stop observing the element.\n this.unobserve();\n }\n if (!isPlainChildren(this.props)) {\n // Store the current State, so we can pass it to the children in the next render update\n // There's no reason to update the state for plain children, since it's not used in the rendering.\n this.setState({ inView, entry });\n }\n if (this.props.onChange) {\n // If the user is actively listening for onChange, always trigger it\n this.props.onChange(inView, entry);\n }\n };\n\n render() {\n if (!isPlainChildren(this.props)) {\n const { inView, entry } = this.state;\n return this.props.children({ inView, entry, ref: this.handleNode });\n }\n\n const {\n children,\n as,\n triggerOnce,\n threshold,\n root,\n rootMargin,\n onChange,\n skip,\n trackVisibility,\n delay,\n initialInView,\n fallbackInView,\n ...props\n } = this.props;\n\n return React.createElement(\n as || 'div',\n { ref: this.handleNode, ...props },\n children,\n );\n }\n}\n","import * as React from 'react';\nimport { InViewHookResponse, IntersectionOptions } from './index';\nimport { useEffect } from 'react';\nimport { observe } from './observe';\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n * const { ref, inView, entry } = useInView({\n * threshold: 0,\n * });\n *\n * return (\n * \n *
{`Header inside viewport ${inView}.`}
\n * \n * );\n * };\n * ```\n */\nexport function useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n}: IntersectionOptions = {}): InViewHookResponse {\n const unobserve = React.useRef();\n const [state, setState] = React.useState({\n inView: !!initialInView,\n });\n const setRef = React.useCallback(\n (node: Element | null) => {\n if (unobserve.current !== undefined) {\n unobserve.current();\n unobserve.current = undefined;\n }\n\n // Skip creating the observer\n if (skip) return;\n\n if (node) {\n unobserve.current = observe(\n node,\n (inView, entry) => {\n setState({ inView, entry });\n\n if (entry.isIntersecting && triggerOnce && unobserve.current) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve.current();\n unobserve.current = undefined;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n }\n },\n // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n // If the threshold is an array, convert it to a string so it won't change between renders.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n Array.isArray(threshold) ? threshold.toString() : threshold,\n root,\n rootMargin,\n triggerOnce,\n skip,\n trackVisibility,\n fallbackInView,\n delay,\n ],\n );\n\n /* eslint-disable-next-line */\n useEffect(() => {\n if (!unobserve.current && state.entry && !triggerOnce && !skip) {\n // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n setState({\n inView: !!initialInView,\n });\n }\n });\n\n const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n // Support object destructuring, by adding the specific values.\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n\n return result;\n}\n","'use strict'\n\nmodule.exports = require('./js')\n","exports.iframeResizer = require('./iframeResizer');\nexports.iframeResizerContentWindow = require('./iframeResizer.contentWindow');\n","/*\n * File: iframeResizer.js\n * Desc: Force iframes to size to content.\n * Requires: iframeResizer.contentWindow.js to be loaded into the target frame.\n * Doc: https://github.com/davidjbradshaw/iframe-resizer\n * Author: David J. Bradshaw - dave@bradshaw.net\n * Contributor: Jure Mav - jure.mav@gmail.com\n * Contributor: Reed Dadoune - reed@dadoune.com\n */\n\n(function(undefined) {\n 'use strict';\n\n if (typeof window === 'undefined') return; // don't run for server side render\n\n var count = 0,\n logEnabled = false,\n hiddenCheckEnabled = false,\n msgHeader = 'message',\n msgHeaderLen = msgHeader.length,\n msgId = '[iFrameSizer]', //Must match iframe msg ID\n msgIdLen = msgId.length,\n pagePosition = null,\n requestAnimationFrame = window.requestAnimationFrame,\n resetRequiredMethods = {\n max: 1,\n scroll: 1,\n bodyScroll: 1,\n documentElementScroll: 1\n },\n settings = {},\n timer = null,\n logId = 'Host Page',\n defaults = {\n autoResize: true,\n bodyBackground: null,\n bodyMargin: null,\n bodyMarginV1: 8,\n bodyPadding: null,\n checkOrigin: true,\n inPageLinks: false,\n enablePublicMethods: true,\n heightCalculationMethod: 'bodyOffset',\n id: 'iFrameResizer',\n interval: 32,\n log: false,\n maxHeight: Infinity,\n maxWidth: Infinity,\n minHeight: 0,\n minWidth: 0,\n resizeFrom: 'parent',\n scrolling: false,\n sizeHeight: true,\n sizeWidth: false,\n warningTimeout: 5000,\n tolerance: 0,\n widthCalculationMethod: 'scroll',\n closedCallback: function() {},\n initCallback: function() {},\n messageCallback: function() {\n warn('MessageCallback function not defined');\n },\n resizedCallback: function() {},\n scrollCallback: function() {\n return true;\n }\n };\n\n function getMutationObserver() {\n return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;\n }\n\n function addEventListener(obj, evt, func) {\n /* istanbul ignore else */ // Not testable in PhantonJS\n if ('addEventListener' in window) {\n obj.addEventListener(evt, func, false);\n } else if ('attachEvent' in window) {\n //IE\n obj.attachEvent('on' + evt, func);\n }\n }\n\n function removeEventListener(el, evt, func) {\n /* istanbul ignore else */ // Not testable in phantonJS\n if ('removeEventListener' in window) {\n el.removeEventListener(evt, func, false);\n } else if ('detachEvent' in window) {\n //IE\n el.detachEvent('on' + evt, func);\n }\n }\n\n function setupRequestAnimationFrame() {\n var vendors = ['moz', 'webkit', 'o', 'ms'],\n x;\n\n // Remove vendor prefixing if prefixed and break early if not\n for (x = 0; x < vendors.length && !requestAnimationFrame; x += 1) {\n requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];\n }\n\n if (!requestAnimationFrame) {\n log('setup', 'RequestAnimationFrame not supported');\n }\n }\n\n function getMyID(iframeId) {\n var retStr = 'Host page: ' + iframeId;\n\n if (window.top !== window.self) {\n if (window.parentIFrame && window.parentIFrame.getId) {\n retStr = window.parentIFrame.getId() + ': ' + iframeId;\n } else {\n retStr = 'Nested host page: ' + iframeId;\n }\n }\n\n return retStr;\n }\n\n function formatLogHeader(iframeId) {\n return msgId + '[' + getMyID(iframeId) + ']';\n }\n\n function isLogEnabled(iframeId) {\n return settings[iframeId] ? settings[iframeId].log : logEnabled;\n }\n\n function log(iframeId, msg) {\n output('log', iframeId, msg, isLogEnabled(iframeId));\n }\n\n function info(iframeId, msg) {\n output('info', iframeId, msg, isLogEnabled(iframeId));\n }\n\n function warn(iframeId, msg) {\n output('warn', iframeId, msg, true);\n }\n\n function output(type, iframeId, msg, enabled) {\n if (true === enabled && 'object' === typeof window.console) {\n console[type](formatLogHeader(iframeId), msg);\n }\n }\n\n function iFrameListener(event) {\n function resizeIFrame() {\n function resize() {\n setSize(messageData);\n setPagePosition(iframeId);\n callback('resizedCallback', messageData);\n }\n\n ensureInRange('Height');\n ensureInRange('Width');\n\n syncResize(resize, messageData, 'init');\n }\n\n function processMsg() {\n var data = msg.substr(msgIdLen).split(':');\n\n return {\n iframe: settings[data[0]] && settings[data[0]].iframe,\n id: data[0],\n height: data[1],\n width: data[2],\n type: data[3]\n };\n }\n\n function ensureInRange(Dimension) {\n var max = Number(settings[iframeId]['max' + Dimension]),\n min = Number(settings[iframeId]['min' + Dimension]),\n dimension = Dimension.toLowerCase(),\n size = Number(messageData[dimension]);\n\n log(\n iframeId,\n 'Checking ' + dimension + ' is in range ' + min + '-' + max\n );\n\n if (size < min) {\n size = min;\n log(iframeId, 'Set ' + dimension + ' to min value');\n }\n\n if (size > max) {\n size = max;\n log(iframeId, 'Set ' + dimension + ' to max value');\n }\n\n messageData[dimension] = '' + size;\n }\n\n function isMessageFromIFrame() {\n function checkAllowedOrigin() {\n function checkList() {\n var i = 0,\n retCode = false;\n\n log(\n iframeId,\n 'Checking connection is from allowed list of origins: ' +\n checkOrigin\n );\n\n for (; i < checkOrigin.length; i++) {\n if (checkOrigin[i] === origin) {\n retCode = true;\n break;\n }\n }\n return retCode;\n }\n\n function checkSingle() {\n var remoteHost = settings[iframeId] && settings[iframeId].remoteHost;\n log(iframeId, 'Checking connection is from: ' + remoteHost);\n return origin === remoteHost;\n }\n\n return checkOrigin.constructor === Array ? checkList() : checkSingle();\n }\n\n var origin = event.origin,\n checkOrigin = settings[iframeId] && settings[iframeId].checkOrigin;\n\n if (checkOrigin && '' + origin !== 'null' && !checkAllowedOrigin()) {\n throw new Error(\n 'Unexpected message received from: ' +\n origin +\n ' for ' +\n messageData.iframe.id +\n '. Message was: ' +\n event.data +\n '. This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.'\n );\n }\n\n return true;\n }\n\n function isMessageForUs() {\n return (\n msgId === ('' + msg).substr(0, msgIdLen) &&\n msg.substr(msgIdLen).split(':')[0] in settings\n ); //''+Protects against non-string msg\n }\n\n function isMessageFromMetaParent() {\n //Test if this message is from a parent above us. This is an ugly test, however, updating\n //the message format would break backwards compatibity.\n var retCode = messageData.type in { true: 1, false: 1, undefined: 1 };\n\n if (retCode) {\n log(iframeId, 'Ignoring init message from meta parent page');\n }\n\n return retCode;\n }\n\n function getMsgBody(offset) {\n return msg.substr(msg.indexOf(':') + msgHeaderLen + offset);\n }\n\n function forwardMsgFromIFrame(msgBody) {\n log(\n iframeId,\n 'MessageCallback passed: {iframe: ' +\n messageData.iframe.id +\n ', message: ' +\n msgBody +\n '}'\n );\n callback('messageCallback', {\n iframe: messageData.iframe,\n message: JSON.parse(msgBody)\n });\n log(iframeId, '--');\n }\n\n function getPageInfo() {\n var bodyPosition = document.body.getBoundingClientRect(),\n iFramePosition = messageData.iframe.getBoundingClientRect();\n\n return JSON.stringify({\n iframeHeight: iFramePosition.height,\n iframeWidth: iFramePosition.width,\n clientHeight: Math.max(\n document.documentElement.clientHeight,\n window.innerHeight || 0\n ),\n clientWidth: Math.max(\n document.documentElement.clientWidth,\n window.innerWidth || 0\n ),\n offsetTop: parseInt(iFramePosition.top - bodyPosition.top, 10),\n offsetLeft: parseInt(iFramePosition.left - bodyPosition.left, 10),\n scrollTop: window.pageYOffset,\n scrollLeft: window.pageXOffset\n });\n }\n\n function sendPageInfoToIframe(iframe, iframeId) {\n function debouncedTrigger() {\n trigger(\n 'Send Page Info',\n 'pageInfo:' + getPageInfo(),\n iframe,\n iframeId\n );\n }\n debounceFrameEvents(debouncedTrigger, 32, iframeId);\n }\n\n function startPageInfoMonitor() {\n function setListener(type, func) {\n function sendPageInfo() {\n if (settings[id]) {\n sendPageInfoToIframe(settings[id].iframe, id);\n } else {\n stop();\n }\n }\n\n ['scroll', 'resize'].forEach(function(evt) {\n log(id, type + evt + ' listener for sendPageInfo');\n func(window, evt, sendPageInfo);\n });\n }\n\n function stop() {\n setListener('Remove ', removeEventListener);\n }\n\n function start() {\n setListener('Add ', addEventListener);\n }\n\n var id = iframeId; //Create locally scoped copy of iFrame ID\n\n start();\n\n if (settings[id]) {\n settings[id].stopPageInfo = stop;\n }\n }\n\n function stopPageInfoMonitor() {\n if (settings[iframeId] && settings[iframeId].stopPageInfo) {\n settings[iframeId].stopPageInfo();\n delete settings[iframeId].stopPageInfo;\n }\n }\n\n function checkIFrameExists() {\n var retBool = true;\n\n if (null === messageData.iframe) {\n warn(iframeId, 'IFrame (' + messageData.id + ') not found');\n retBool = false;\n }\n return retBool;\n }\n\n function getElementPosition(target) {\n var iFramePosition = target.getBoundingClientRect();\n\n getPagePosition(iframeId);\n\n return {\n x: Math.floor(Number(iFramePosition.left) + Number(pagePosition.x)),\n y: Math.floor(Number(iFramePosition.top) + Number(pagePosition.y))\n };\n }\n\n function scrollRequestFromChild(addOffset) {\n /* istanbul ignore next */ //Not testable in Karma\n function reposition() {\n pagePosition = newPosition;\n scrollTo();\n log(iframeId, '--');\n }\n\n function calcOffset() {\n return {\n x: Number(messageData.width) + offset.x,\n y: Number(messageData.height) + offset.y\n };\n }\n\n function scrollParent() {\n if (window.parentIFrame) {\n window.parentIFrame['scrollTo' + (addOffset ? 'Offset' : '')](\n newPosition.x,\n newPosition.y\n );\n } else {\n warn(\n iframeId,\n 'Unable to scroll to requested position, window.parentIFrame not found'\n );\n }\n }\n\n var offset = addOffset\n ? getElementPosition(messageData.iframe)\n : { x: 0, y: 0 },\n newPosition = calcOffset();\n\n log(\n iframeId,\n 'Reposition requested from iFrame (offset x:' +\n offset.x +\n ' y:' +\n offset.y +\n ')'\n );\n\n if (window.top !== window.self) {\n scrollParent();\n } else {\n reposition();\n }\n }\n\n function scrollTo() {\n if (false !== callback('scrollCallback', pagePosition)) {\n setPagePosition(iframeId);\n } else {\n unsetPagePosition();\n }\n }\n\n function findTarget(location) {\n function jumpToTarget() {\n var jumpPosition = getElementPosition(target);\n\n log(\n iframeId,\n 'Moving to in page link (#' +\n hash +\n ') at x: ' +\n jumpPosition.x +\n ' y: ' +\n jumpPosition.y\n );\n pagePosition = {\n x: jumpPosition.x,\n y: jumpPosition.y\n };\n\n scrollTo();\n log(iframeId, '--');\n }\n\n function jumpToParent() {\n if (window.parentIFrame) {\n window.parentIFrame.moveToAnchor(hash);\n } else {\n log(\n iframeId,\n 'In page link #' +\n hash +\n ' not found and window.parentIFrame not found'\n );\n }\n }\n\n var hash = location.split('#')[1] || '',\n hashData = decodeURIComponent(hash),\n target =\n document.getElementById(hashData) ||\n document.getElementsByName(hashData)[0];\n\n if (target) {\n jumpToTarget();\n } else if (window.top !== window.self) {\n jumpToParent();\n } else {\n log(iframeId, 'In page link #' + hash + ' not found');\n }\n }\n\n function callback(funcName, val) {\n return chkCallback(iframeId, funcName, val);\n }\n\n function actionMsg() {\n if (settings[iframeId] && settings[iframeId].firstRun) firstRun();\n\n switch (messageData.type) {\n case 'close':\n if (settings[iframeId].closeRequestCallback)\n chkCallback(\n iframeId,\n 'closeRequestCallback',\n settings[iframeId].iframe\n );\n else closeIFrame(messageData.iframe);\n break;\n case 'message':\n forwardMsgFromIFrame(getMsgBody(6));\n break;\n case 'scrollTo':\n scrollRequestFromChild(false);\n break;\n case 'scrollToOffset':\n scrollRequestFromChild(true);\n break;\n case 'pageInfo':\n sendPageInfoToIframe(\n settings[iframeId] && settings[iframeId].iframe,\n iframeId\n );\n startPageInfoMonitor();\n break;\n case 'pageInfoStop':\n stopPageInfoMonitor();\n break;\n case 'inPageLink':\n findTarget(getMsgBody(9));\n break;\n case 'reset':\n resetIFrame(messageData);\n break;\n case 'init':\n resizeIFrame();\n callback('initCallback', messageData.iframe);\n break;\n default:\n resizeIFrame();\n }\n }\n\n function hasSettings(iframeId) {\n var retBool = true;\n\n if (!settings[iframeId]) {\n retBool = false;\n warn(\n messageData.type +\n ' No settings for ' +\n iframeId +\n '. Message was: ' +\n msg\n );\n }\n\n return retBool;\n }\n\n function iFrameReadyMsgReceived() {\n for (var iframeId in settings) {\n trigger(\n 'iFrame requested init',\n createOutgoingMsg(iframeId),\n document.getElementById(iframeId),\n iframeId\n );\n }\n }\n\n function firstRun() {\n if (settings[iframeId]) {\n settings[iframeId].firstRun = false;\n }\n }\n\n function clearWarningTimeout() {\n if (settings[iframeId]) {\n clearTimeout(settings[iframeId].msgTimeout);\n settings[iframeId].warningTimeout = 0;\n }\n }\n\n var msg = event.data,\n messageData = {},\n iframeId = null;\n\n if ('[iFrameResizerChild]Ready' === msg) {\n iFrameReadyMsgReceived();\n } else if (isMessageForUs()) {\n messageData = processMsg();\n iframeId = logId = messageData.id;\n if (settings[iframeId]) {\n settings[iframeId].loaded = true;\n }\n\n if (!isMessageFromMetaParent() && hasSettings(iframeId)) {\n log(iframeId, 'Received: ' + msg);\n\n if (checkIFrameExists() && isMessageFromIFrame()) {\n actionMsg();\n }\n }\n } else {\n info(iframeId, 'Ignored: ' + msg);\n }\n }\n\n function chkCallback(iframeId, funcName, val) {\n var func = null,\n retVal = null;\n\n if (settings[iframeId]) {\n func = settings[iframeId][funcName];\n\n if ('function' === typeof func) {\n retVal = func(val);\n } else {\n throw new TypeError(\n funcName + ' on iFrame[' + iframeId + '] is not a function'\n );\n }\n }\n\n return retVal;\n }\n\n function removeIframeListeners(iframe) {\n var iframeId = iframe.id;\n delete settings[iframeId];\n }\n\n function closeIFrame(iframe) {\n var iframeId = iframe.id;\n log(iframeId, 'Removing iFrame: ' + iframeId);\n\n try {\n // Catch race condition error with React\n if (iframe.parentNode) {\n iframe.parentNode.removeChild(iframe);\n }\n } catch (e) {}\n\n chkCallback(iframeId, 'closedCallback', iframeId);\n log(iframeId, '--');\n removeIframeListeners(iframe);\n }\n\n function getPagePosition(iframeId) {\n if (null === pagePosition) {\n pagePosition = {\n x:\n window.pageXOffset !== undefined\n ? window.pageXOffset\n : document.documentElement.scrollLeft,\n y:\n window.pageYOffset !== undefined\n ? window.pageYOffset\n : document.documentElement.scrollTop\n };\n log(\n iframeId,\n 'Get page position: ' + pagePosition.x + ',' + pagePosition.y\n );\n }\n }\n\n function setPagePosition(iframeId) {\n if (null !== pagePosition) {\n window.scrollTo(pagePosition.x, pagePosition.y);\n log(\n iframeId,\n 'Set page position: ' + pagePosition.x + ',' + pagePosition.y\n );\n unsetPagePosition();\n }\n }\n\n function unsetPagePosition() {\n pagePosition = null;\n }\n\n function resetIFrame(messageData) {\n function reset() {\n setSize(messageData);\n trigger('reset', 'reset', messageData.iframe, messageData.id);\n }\n\n log(\n messageData.id,\n 'Size reset requested by ' +\n ('init' === messageData.type ? 'host page' : 'iFrame')\n );\n getPagePosition(messageData.id);\n syncResize(reset, messageData, 'reset');\n }\n\n function setSize(messageData) {\n function setDimension(dimension) {\n if (!messageData.id) {\n log('undefined', 'messageData id not set');\n return;\n }\n messageData.iframe.style[dimension] = messageData[dimension] + 'px';\n log(\n messageData.id,\n 'IFrame (' +\n iframeId +\n ') ' +\n dimension +\n ' set to ' +\n messageData[dimension] +\n 'px'\n );\n }\n\n function chkZero(dimension) {\n //FireFox sets dimension of hidden iFrames to zero.\n //So if we detect that set up an event to check for\n //when iFrame becomes visible.\n\n /* istanbul ignore next */ //Not testable in PhantomJS\n if (!hiddenCheckEnabled && '0' === messageData[dimension]) {\n hiddenCheckEnabled = true;\n log(iframeId, 'Hidden iFrame detected, creating visibility listener');\n fixHiddenIFrames();\n }\n }\n\n function processDimension(dimension) {\n setDimension(dimension);\n chkZero(dimension);\n }\n\n var iframeId = messageData.iframe.id;\n\n if (settings[iframeId]) {\n if (settings[iframeId].sizeHeight) {\n processDimension('height');\n }\n if (settings[iframeId].sizeWidth) {\n processDimension('width');\n }\n }\n }\n\n function syncResize(func, messageData, doNotSync) {\n /* istanbul ignore if */ //Not testable in PhantomJS\n if (doNotSync !== messageData.type && requestAnimationFrame) {\n log(messageData.id, 'Requesting animation frame');\n requestAnimationFrame(func);\n } else {\n func();\n }\n }\n\n function trigger(calleeMsg, msg, iframe, id, noResponseWarning) {\n function postMessageToIFrame() {\n var target = settings[id] && settings[id].targetOrigin;\n log(\n id,\n '[' +\n calleeMsg +\n '] Sending msg to iframe[' +\n id +\n '] (' +\n msg +\n ') targetOrigin: ' +\n target\n );\n iframe.contentWindow.postMessage(msgId + msg, target);\n }\n\n function iFrameNotFound() {\n warn(id, '[' + calleeMsg + '] IFrame(' + id + ') not found');\n }\n\n function chkAndSend() {\n if (\n iframe &&\n 'contentWindow' in iframe &&\n null !== iframe.contentWindow\n ) {\n //Null test for PhantomJS\n postMessageToIFrame();\n } else {\n iFrameNotFound();\n }\n }\n\n function warnOnNoResponse() {\n function warning() {\n if (settings[id] && !settings[id].loaded && !errorShown) {\n errorShown = true;\n warn(\n id,\n 'IFrame has not responded within ' +\n settings[id].warningTimeout / 1000 +\n ' seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.'\n );\n }\n }\n\n if (\n !!noResponseWarning &&\n settings[id] &&\n !!settings[id].warningTimeout\n ) {\n settings[id].msgTimeout = setTimeout(\n warning,\n settings[id].warningTimeout\n );\n }\n }\n\n var errorShown = false;\n\n id = id || iframe.id;\n\n if (settings[id]) {\n chkAndSend();\n warnOnNoResponse();\n }\n }\n\n function createOutgoingMsg(iframeId) {\n return (\n iframeId +\n ':' +\n settings[iframeId].bodyMarginV1 +\n ':' +\n settings[iframeId].sizeWidth +\n ':' +\n settings[iframeId].log +\n ':' +\n settings[iframeId].interval +\n ':' +\n settings[iframeId].enablePublicMethods +\n ':' +\n settings[iframeId].autoResize +\n ':' +\n settings[iframeId].bodyMargin +\n ':' +\n settings[iframeId].heightCalculationMethod +\n ':' +\n settings[iframeId].bodyBackground +\n ':' +\n settings[iframeId].bodyPadding +\n ':' +\n settings[iframeId].tolerance +\n ':' +\n settings[iframeId].inPageLinks +\n ':' +\n settings[iframeId].resizeFrom +\n ':' +\n settings[iframeId].widthCalculationMethod\n );\n }\n\n function setupIFrame(iframe, options) {\n function setLimits() {\n function addStyle(style) {\n if (\n Infinity !== settings[iframeId][style] &&\n 0 !== settings[iframeId][style]\n ) {\n iframe.style[style] = settings[iframeId][style] + 'px';\n log(\n iframeId,\n 'Set ' + style + ' = ' + settings[iframeId][style] + 'px'\n );\n }\n }\n\n function chkMinMax(dimension) {\n if (\n settings[iframeId]['min' + dimension] >\n settings[iframeId]['max' + dimension]\n ) {\n throw new Error(\n 'Value for min' +\n dimension +\n ' can not be greater than max' +\n dimension\n );\n }\n }\n\n chkMinMax('Height');\n chkMinMax('Width');\n\n addStyle('maxHeight');\n addStyle('minHeight');\n addStyle('maxWidth');\n addStyle('minWidth');\n }\n\n function newId() {\n var id = (options && options.id) || defaults.id + count++;\n if (null !== document.getElementById(id)) {\n id = id + count++;\n }\n return id;\n }\n\n function ensureHasId(iframeId) {\n logId = iframeId;\n if ('' === iframeId) {\n iframe.id = iframeId = newId();\n logEnabled = (options || {}).log;\n logId = iframeId;\n log(\n iframeId,\n 'Added missing iframe ID: ' + iframeId + ' (' + iframe.src + ')'\n );\n }\n\n return iframeId;\n }\n\n function setScrolling() {\n log(\n iframeId,\n 'IFrame scrolling ' +\n (settings[iframeId] && settings[iframeId].scrolling\n ? 'enabled'\n : 'disabled') +\n ' for ' +\n iframeId\n );\n iframe.style.overflow =\n false === (settings[iframeId] && settings[iframeId].scrolling)\n ? 'hidden'\n : 'auto';\n switch (settings[iframeId] && settings[iframeId].scrolling) {\n case 'omit':\n break;\n case true:\n iframe.scrolling = 'yes';\n break;\n case false:\n iframe.scrolling = 'no';\n break;\n default:\n iframe.scrolling = settings[iframeId]\n ? settings[iframeId].scrolling\n : 'no';\n }\n }\n\n //The V1 iFrame script expects an int, where as in V2 expects a CSS\n //string value such as '1px 3em', so if we have an int for V2, set V1=V2\n //and then convert V2 to a string PX value.\n function setupBodyMarginValues() {\n if (\n 'number' ===\n typeof (settings[iframeId] && settings[iframeId].bodyMargin) ||\n '0' === (settings[iframeId] && settings[iframeId].bodyMargin)\n ) {\n settings[iframeId].bodyMarginV1 = settings[iframeId].bodyMargin;\n settings[iframeId].bodyMargin =\n '' + settings[iframeId].bodyMargin + 'px';\n }\n }\n\n function checkReset() {\n // Reduce scope of firstRun to function, because IE8's JS execution\n // context stack is borked and this value gets externally\n // changed midway through running this function!!!\n var firstRun = settings[iframeId] && settings[iframeId].firstRun,\n resetRequertMethod =\n settings[iframeId] &&\n settings[iframeId].heightCalculationMethod in resetRequiredMethods;\n\n if (!firstRun && resetRequertMethod) {\n resetIFrame({ iframe: iframe, height: 0, width: 0, type: 'init' });\n }\n }\n\n function setupIFrameObject() {\n if (Function.prototype.bind && settings[iframeId]) {\n //Ignore unpolyfilled IE8.\n settings[iframeId].iframe.iFrameResizer = {\n close: closeIFrame.bind(null, settings[iframeId].iframe),\n\n removeListeners: removeIframeListeners.bind(\n null,\n settings[iframeId].iframe\n ),\n\n resize: trigger.bind(\n null,\n 'Window resize',\n 'resize',\n settings[iframeId].iframe\n ),\n\n moveToAnchor: function(anchor) {\n trigger(\n 'Move to anchor',\n 'moveToAnchor:' + anchor,\n settings[iframeId].iframe,\n iframeId\n );\n },\n\n sendMessage: function(message) {\n message = JSON.stringify(message);\n trigger(\n 'Send Message',\n 'message:' + message,\n settings[iframeId].iframe,\n iframeId\n );\n }\n };\n }\n }\n\n //We have to call trigger twice, as we can not be sure if all\n //iframes have completed loading when this code runs. The\n //event listener also catches the page changing in the iFrame.\n function init(msg) {\n function iFrameLoaded() {\n trigger('iFrame.onload', msg, iframe, undefined, true);\n checkReset();\n }\n\n function createDestroyObserver(MutationObserver) {\n if (!iframe.parentNode) {\n return;\n }\n\n var destroyObserver = new MutationObserver(function (mutations) {\n mutations.forEach(function (mutation) {\n var removedNodes = Array.prototype.slice.call(mutation.removedNodes); // Transform NodeList into an Array\n removedNodes.forEach(function (removedNode) {\n if (removedNode === iframe) {\n closeIFrame(iframe);\n }\n });\n });\n });\n destroyObserver.observe(iframe.parentNode, {\n childList: true\n });\n }\n\n var MutationObserver = getMutationObserver();\n if (MutationObserver) {\n createDestroyObserver(MutationObserver);\n }\n\n addEventListener(iframe, 'load', iFrameLoaded);\n trigger('init', msg, iframe, undefined, true);\n }\n\n function checkOptions(options) {\n if ('object' !== typeof options) {\n throw new TypeError('Options is not an object');\n }\n }\n\n function copyOptions(options) {\n for (var option in defaults) {\n if (defaults.hasOwnProperty(option)) {\n settings[iframeId][option] = options.hasOwnProperty(option)\n ? options[option]\n : defaults[option];\n }\n }\n }\n\n function getTargetOrigin(remoteHost) {\n return '' === remoteHost || 'file://' === remoteHost ? '*' : remoteHost;\n }\n\n function processOptions(options) {\n options = options || {};\n settings[iframeId] = {\n firstRun: true,\n iframe: iframe,\n remoteHost: iframe.src\n .split('/')\n .slice(0, 3)\n .join('/')\n };\n\n checkOptions(options);\n copyOptions(options);\n\n if (settings[iframeId]) {\n settings[iframeId].targetOrigin =\n true === settings[iframeId].checkOrigin\n ? getTargetOrigin(settings[iframeId].remoteHost)\n : '*';\n }\n }\n\n function beenHere() {\n return iframeId in settings && 'iFrameResizer' in iframe;\n }\n\n var iframeId = ensureHasId(iframe.id);\n\n if (!beenHere()) {\n processOptions(options);\n setScrolling();\n setLimits();\n setupBodyMarginValues();\n init(createOutgoingMsg(iframeId));\n setupIFrameObject();\n } else {\n warn(iframeId, 'Ignored iFrame, already setup.');\n }\n }\n\n function debouce(fn, time) {\n if (null === timer) {\n timer = setTimeout(function() {\n timer = null;\n fn();\n }, time);\n }\n }\n\n var frameTimer = {};\n function debounceFrameEvents(fn, time, frameId) {\n if (!frameTimer[frameId]) {\n frameTimer[frameId] = setTimeout(function() {\n frameTimer[frameId] = null;\n fn();\n }, time);\n }\n } //Not testable in PhantomJS\n\n /* istanbul ignore next */ function fixHiddenIFrames() {\n function checkIFrames() {\n function checkIFrame(settingId) {\n function chkDimension(dimension) {\n return (\n '0px' ===\n (settings[settingId] && settings[settingId].iframe.style[dimension])\n );\n }\n\n function isVisible(el) {\n return null !== el.offsetParent;\n }\n\n if (\n settings[settingId] &&\n isVisible(settings[settingId].iframe) &&\n (chkDimension('height') || chkDimension('width'))\n ) {\n trigger(\n 'Visibility change',\n 'resize',\n settings[settingId].iframe,\n settingId\n );\n }\n }\n\n for (var settingId in settings) {\n checkIFrame(settingId);\n }\n }\n\n function mutationObserved(mutations) {\n log(\n 'window',\n 'Mutation observed: ' + mutations[0].target + ' ' + mutations[0].type\n );\n debouce(checkIFrames, 16);\n }\n\n function createMutationObserver() {\n var target = document.querySelector('body'),\n config = {\n attributes: true,\n attributeOldValue: false,\n characterData: true,\n characterDataOldValue: false,\n childList: true,\n subtree: true\n },\n observer = new MutationObserver(mutationObserved);\n\n observer.observe(target, config);\n }\n\n var MutationObserver = getMutationObserver();\n if (MutationObserver) {\n createMutationObserver();\n }\n }\n\n function resizeIFrames(event) {\n function resize() {\n sendTriggerMsg('Window ' + event, 'resize');\n }\n\n log('window', 'Trigger event: ' + event);\n debouce(resize, 16);\n } //Not testable in PhantomJS\n\n /* istanbul ignore next */ function tabVisible() {\n function resize() {\n sendTriggerMsg('Tab Visable', 'resize');\n }\n\n if ('hidden' !== document.visibilityState) {\n log('document', 'Trigger event: Visiblity change');\n debouce(resize, 16);\n }\n }\n\n function sendTriggerMsg(eventName, event) {\n function isIFrameResizeEnabled(iframeId) {\n return (\n settings[iframeId] &&\n 'parent' === settings[iframeId].resizeFrom &&\n settings[iframeId].autoResize &&\n !settings[iframeId].firstRun\n );\n }\n\n for (var iframeId in settings) {\n if (isIFrameResizeEnabled(iframeId)) {\n trigger(eventName, event, document.getElementById(iframeId), iframeId);\n }\n }\n }\n\n function setupEventListeners() {\n addEventListener(window, 'message', iFrameListener);\n\n addEventListener(window, 'resize', function() {\n resizeIFrames('resize');\n });\n\n addEventListener(document, 'visibilitychange', tabVisible);\n addEventListener(document, '-webkit-visibilitychange', tabVisible); //Andriod 4.4\n addEventListener(window, 'focusin', function() {\n resizeIFrames('focus');\n }); //IE8-9\n addEventListener(window, 'focus', function() {\n resizeIFrames('focus');\n });\n }\n\n function factory() {\n function init(options, element) {\n function chkType() {\n if (!element.tagName) {\n throw new TypeError('Object is not a valid DOM element');\n } else if ('IFRAME' !== element.tagName.toUpperCase()) {\n throw new TypeError(\n 'Expected