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

51
iframe-resizer-master/.eslintrc Executable file
View File

@ -0,0 +1,51 @@
{
"extends": ["auto"],
"plugins": ["ie11"],
"env": {
"amd": true,
"browser": true,
"jasmine": true
},
"globals": {
"location": true
},
"parserOptions": { "ecmaVersion": 2015 },
"rules": {
"func-names": 0,
"global-require": 0,
"no-param-reassign": 0,
"no-plusplus": 0,
"no-use-before-define": 0,
"no-shadow": 0,
"no-var": 0,
"object-shorthand": 0,
"one-var": 0,
"prefer-arrow-callback": 0,
"prefer-destructuring": 0,
"prefer-rest-params": 0,
"prefer-template": 0,
"vars-on-top": 0,
"yoda": 0,
"ie11/no-collection-args": ["error"],
"ie11/no-for-in-const": ["error"],
"ie11/no-loop-func": ["warn"],
"ie11/no-weak-collections": ["error"],
"import/no-amd": 0,
"lodash/prefer-noop": 0,
"lodash-fp/prefer-constant": 0,
"unicorn/consistent-function-scoping": 0,
"unicorn/filename-case": 0,
"unicorn/no-array-callback-reference": 0,
"unicorn/no-this-assignment": 0,
"unicorn/prefer-date-now": 0,
"unicorn/prefer-dom-node-append": 0,
"unicorn/prefer-dom-node-remove": 0,
"unicorn/prefer-module": 0,
"unicorn/prefer-node-append": 0,
"unicorn/prefer-node-remove": 0,
"unicorn/prefer-query-selector": 0,
"unicorn/prefer-string-slice": 0,
"unicorn/prefer-number-properties": 0,
"unicorn/prevent-abbreviations": 0
}
}

20
iframe-resizer-master/.github/FUNDING.yml vendored Executable file
View File

@ -0,0 +1,20 @@
# These are supported funding model platforms
# github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
# patreon: # Replace with a single Patreon username
# open_collective: # Replace with a single Open Collective username
# ko_fi: # Replace with a single Ko-fi username
# tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
# community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
# liberapay: # Replace with a single Liberapay username
# issuehunt: # Replace with a single IssueHunt username
# otechie: # Replace with a single Otechie username
# custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
# github: davidjbradshaw
custom: https://www.buymeacoffee.com/davidjbradshaw
custom: https://www.paypal.me/davidjbradshaw
# issuehunt: davidjbradshaw
# liberapay: davidjbradshaw
# ko_fi: davidjbradshaw
# tidelift: npm/iframe-resizer

View File

@ -0,0 +1,38 @@
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.

11
iframe-resizer-master/.github/dependabot.yml vendored Executable file
View File

@ -0,0 +1,11 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: "npm" # See documentation for possible values
directory: "/" # Location of package manifests
schedule:
interval: "daily"

10
iframe-resizer-master/.gitignore vendored Executable file
View File

@ -0,0 +1,10 @@
.DS_Store
.coveralls.yml
node_modules
bin
example/test.html
test/*.off
npm-debug.log
bower_components
coverage*
.idea

View File

@ -0,0 +1,3 @@
{
"reject": ["grunt-contrib-qunit"]
}

View File

@ -0,0 +1,21 @@
.DS_Store
.coveralls.yml
.idea
.prettierrc
.travis.yml
.github
node_modules
bin
docs
example
test
spec
src
npm-debug.log
bower_components
bower.json
gruntfile.js
karma.conf.js
test-main.js
package-lock.json
coverage*

View File

@ -0,0 +1,10 @@
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false
}

View File

@ -0,0 +1,6 @@
language: node_js
node_js:
- "11.0"
before_script:
- npm install -g grunt-cli
sudo: false

View File

@ -0,0 +1,218 @@
# Version History
- v4.3.2 [#936](https://github.com/davidjbradshaw/iframe-resizer/issues/936) Allow max/min values for iFrame size to be set using units other than `px` [[Luke Murray](https://github.com/lukesmurray)]
- v4.3.1 [#901](https://github.com/davidjbradshaw/iframe-resizer/issues/901) Fix backwards compatability issue with mouse events
- v4.3.0 Add `onMouseEnter` and `onMouseLeave` event callbacks [DEPRECATED]
- v4.2.11 Remove `unicorn/prefer-number-properties` from eslint rules and revert `Number.parseInt` to `parseInt`
- v4.2.10 [#787](https://github.com/davidjbradshaw/iframe-resizer/issues/787) Replace `const` with `var` in index.js for IE10 [[Thomas Jaggi](https://github.com/backflip)]
- v4.2.9 [#783](https://github.com/davidjbradshaw/iframe-resizer/issues/783) Bind `requestAnimationFrame` to `window` to fix issue with FireFox Content-Scripts [[Greg Soltis](https://github.com/gsoltis)]
- v4.2.8 [#779](https://github.com/davidjbradshaw/iframe-resizer/issues/779) Fix issue with `javascript:void(0)` and `about:blank` URLs [[ceckoslab](https://github.com/ceckoslab)]
- v4.2.7 Add support for NPM funding
- v4.2.4 [#772](https://github.com/davidjbradshaw/iframe-resizer/issues/772) Fix issue with iframes inside ShaddowDOM elements [[Martin Belanger](https://github.com/martinbelanger)]
- v4.2.3 [#683](https://github.com/davidjbradshaw/iframe-resizer/issues/683) Include border top/bottom, plus padding top/bottom, when calculating heights on iframe with `box-sizing: border-box;` [[Jim Doyle](https://github.com//superelement)]. [#768](https://github.com/davidjbradshaw/iframe-resizer/issues/768) Fix issue with hidden iframes [[Tony Living]](https://github.com//tonyliving)
- v4.2.2 [#761](https://github.com/davidjbradshaw/iframe-resizer/pull/761) Check for iframe.src when parsing it for remoteHost [[Filip Stollar](https://github.com//SuNaden)]
- v4.2.1 [#723](https://github.com/davidjbradshaw/iframe-resizer/pull/723) Fix option to turn off `autoResize` from iframe, when `resizeFrom` is set to `parent` [[Dennis Kronbügel]](https://github.com//deBFM)
- v4.2.0 Add `onClose()` event to parent
- v4.1.1 [#686](https://github.com/davidjbradshaw/iframe-resizer/pull/694) Fix IE11 regression with Object.values [[Jonathan Lehman](https://github.com//jdlehman)]
- v4.1.0 [#686](https://github.com/davidjbradshaw/iframe-resizer/pull/686) Split client(Height/Width) into document and window values [[Bernhard Mäder](https://github.com//nuschk)]
- v4.0.4 [#674](https://github.com/davidjbradshaw/iframe-resizer/pull/674) Fix default export
- v4.0.3 [#606](https://github.com/davidjbradshaw/iframe-resizer/pull/606) Force height of clearFix div in iframe to 0
- v4.0.2 [#671](https://github.com/davidjbradshaw/iframe-resizer/pull/671) Fix issue with window resize
- v4.0.1 Fix documentation links in `README.md`
- v4.0.0 Drop support for IE8-10 and Andriod 4, renamed event handlers from `fooCallback` to `onFoo` and restructure documentation. Reformat code with Prettier and add eslint to build
- v3.6.5 [#658](https://github.com/davidjbradshaw/iframe-resizer/pull/658) Add `.npmignore` to project [[Sebastian Lamelas](https://github.com/smulesoft)]
- v3.6.4 [#651](https://github.com/davidjbradshaw/iframe-resizer/pull/651) Fix issue resource leak when iframe removed from the page [[Steffen Eckardt](https://github.com/seckardt)]. [#651](https://github.com/davidjbradshaw/iframe-resizer/pull/651) Make Require.js optional when it is included on the page before iframe-resizer [[Dahmian Owen](https://github.com/dahmian)]
- v3.6.3 [#635](https://github.com/davidjbradshaw/iframe-resizer/pull/635) Fix issue with undefined ID [[Henry Schein](https://github.com/ddxdental)]. [#582](https://github.com/davidjbradshaw/iframe-resizer/pull/582) Add `omit` option to `scrolling` config [[Matt Ryan](https://github.com/mryand)]
- v3.6.2 [#596](https://github.com/davidjbradshaw/iframe-resizer/pull/596) Add Passive Event Listener for Performance [[Henrik Vendelbo](https://github.com/thepian)]. [#613](https://github.com/davidjbradshaw/iframe-resizer/pull/613) Check if the iFrameResize function is attached to the prototype of jQuery [[Paul Antal](https://github.com/paul-antal)]. [#620](https://github.com/davidjbradshaw/iframe-resizer/pull/620) Fixed an issue where host page fires init before iframe receiver setup [[Mark Zhou](https://github.com/mrmarktyy)]. [#620](https://github.com/davidjbradshaw/iframe-resizer/pull/620) Add `removeListeners` method to better support React [[Khang Nguyen](https://github.com/khangiskhan)]
- v3.6.1 [#576](https://github.com/davidjbradshaw/iframe-resizer/pull/576) Fix race condition caused by react-iframe-resizer removing the domNode and calling `close()`
- v3.6.0 [#562](https://github.com/davidjbradshaw/iframe-resizer/pull/562) Fix issue with debounce getPageInfo when their is more than one iFrame on the page [[Thomas Pringle](https://github.com/thomaspringle)]. [#568](https://github.com/davidjbradshaw/iframe-resizer/pull/568) Fix bug in Chrome 65 when iframe parent element has `display:none` set [[Steve Hong](https://github.com/aniude)]
- v3.5.16 [#554](https://github.com/davidjbradshaw/iframe-resizer/issues/554) Fix throttling of init event [[SHOTA](https://github.com/senta)]. [#553](https://github.com/davidjbradshaw/iframe-resizer/issues/553) Prevents unhandled exception in IE11 [[vitoss](https://github.com/vitoss)]. [#555](https://github.com/davidjbradshaw/iframe-resizer/issues/555) Fix IE PolyFil and make grunt-cli local [[Jan Schmidle](https://github.com/bitcloud)]
- v3.5.15 [#498](https://github.com/davidjbradshaw/iframe-resizer/issues/498) Fix bug "Cannot read property 'firstRun' of undefined" [[Shaun Johansen](https://github.com/shaunjohansen)]. [#517] Fix readyState issue in iFrame [[lostincomputer](https://github.com/lostincomputer)]
- v3.5.14 [#477](https://github.com/davidjbradshaw/iframe-resizer/issues/477) Fix bug when iFrame closed before first resize
- v3.5.13 [#473](https://github.com/davidjbradshaw/iframe-resizer/issues/473) Improve no response from iFrame warning message
- v3.5.12 [#475](https://github.com/davidjbradshaw/iframe-resizer/issues/475) Delay onResize until after the iFrame has resized [[Codener](https://github.com/codener)]
- v3.5.11 [#470](https://github.com/davidjbradshaw/iframe-resizer/issues/470) Fix jQuery reference error [[Russell Schick](https://github.com/rschick)]
- v3.5.10 [#461](https://github.com/davidjbradshaw/iframe-resizer/issues/461) Don't run for server-side render
- v3.5.9 Show warning message if no response from iFrame. [#463](https://github.com/davidjbradshaw/iframe-resizer/issues/463) Suppress warning message when code loaded via module [[Sergey Pereskokov](https://github.com/SerjoPepper)]
- v3.5.8 [#315](https://github.com/davidjbradshaw/iframe-resizer/issues/315) Allow Scrolling to be set to 'auto'
- v3.5.7 [#438](https://github.com/davidjbradshaw/iframe-resizer/issues/438) Check jQuery pluging wrapper not already loaded. [#423](https://github.com/davidjbradshaw/iframe-resizer/issues/423) Properly remove event listeners [[Aaron Hardy](https://github.com/Aaronius)]. [#401](https://github.com/davidjbradshaw/iframe-resizer/issues/401) Make tagged element fall back to all elements if tag not found. [#381](https://github.com/davidjbradshaw/iframe-resizer/issues/381) Fixing disconnect when iframe is missing temporarly [[Jeff Hicken](https://github.com/jhicken)]. Added warnings for missing iFrame and deprecated options
- v3.5.5 [#373](https://github.com/davidjbradshaw/iframe-resizer/issues/373) Add option for custom size calculation methods in iFrame. [#374](https://github.com/davidjbradshaw/iframe-resizer/issues/374) Fix bug with in page links called from parent page
- v3.5.4 [#362](https://github.com/davidjbradshaw/iframe-resizer/issues/362) Handle jQuery being loaded in odd ways. [#297](https://github.com/davidjbradshaw/iframe-resizer/issues/297) Ensure document ready before resizing
- v3.5.3 [#283](https://github.com/davidjbradshaw/iframe-resizer/issues/283) Added _readystatechange_ event listener
- v3.5.2 [#314](https://github.com/davidjbradshaw/iframe-resizer/pull/314) Add iframeHeight and iframeWidth properties to pageInfo [[Pierre Olivier](https://github.com/pomartel)]. [#303](https://github.com/davidjbradshaw/iframe-resizer/issues/303) Fix issue with IE8 polyFils
- v3.5.1 [#286](https://github.com/davidjbradshaw/iframe-resizer/issues/286) Fixed _taggedElement / lowestElement / rightMostElement_ to calculate correct margin [[Dan Ballance](https://github.com/danballance)]
- v3.5.0 Recall getPageInfo callback when parent page position changes. Added _Array.prototype.forEach_ to IE8 polyfils
- v3.4.2 Only teardown events on close if currently enabled
- v3.4.1 [#271](https://github.com/davidjbradshaw/iframe-resizer/issues/271) Fix bower.json to point to _js_ folder, rather then _src_ [[Yachi](https://github.com/yachi)]
- v3.4.0 [#262](https://github.com/davidjbradshaw/iframe-resizer/issues/262) Add _getPageInfo_ method to _parentIFrame_ [[Pierre Olivier](https://github.com/pomartel)]. [#263](https://github.com/davidjbradshaw/iframe-resizer/issues/263) Change _leftMostElement_ to rightMostElement [[Luiz Panariello](https://github.com/LuizPanariello)]. [#265](https://github.com/davidjbradshaw/iframe-resizer/issues/265) Fix issue when no options being passed and added test for this
- v3.3.1 Point index.js to the JS folder, instead of the src folder. Added touch event listeners. _AutoResize_ method now returns current state
- v3.3.0 [#97](https://github.com/davidjbradshaw/iframe-resizer/issues/97) Add _autoResize_ method to _parentIFrame_. Fix bug when _setHeightCalculationMethod_ is called with invalid value. Add interval timer to event teardown. Log targetOrigin\*. [#253](https://github.com/davidjbradshaw/iframe-resizer/issues/253) Work around bug with MooTools interfering with system objects
- v3.2.0 Added calculation of margin to _LowestElement_, _LeftMostElement_ and _taggedElement_ calculation modes. Check callback function is a function before calling it. [#246](https://github.com/davidjbradshaw/iframe-resizer/issues/246) Fixed issue when _onScroll_ changes the page position. [#247](https://github.com/davidjbradshaw/iframe-resizer/issues/247) Fix rounding issue when page is zoomed in Chrome [[thenewguy](https://github.com/thenewguy)]
- v3.1.1 Added _onReady_ to iFrame. Create _iFrameResizer_ object on iFrame during setup, rather than waiting for init message to be returned from iFrame. Add ref to iFrame in host page log messages. [#245](https://github.com/davidjbradshaw/iframe-resizer/issues/245) Fix issue with iFrame not correctly resizing when multiple images are injected into the page [[mdgbayly](https://github.com/mdgbayly)]. [#246](https://github.com/davidjbradshaw/iframe-resizer/issues/246) Fix issue with including ':' in messages passed to iFrames
- v3.1.0 [#101](https://github.com/davidjbradshaw/iframe-resizer/issues/101) Support async loading of iFrame script. [#239](https://github.com/davidjbradshaw/iframe-resizer/issues/239) Throttle size checking to once per screen refresh (16ms). Fixed issue with hidden iFrames in FireFox. Improved handling of parent page events. [#236](https://github.com/davidjbradshaw/iframe-resizer/issues/236) Cope with iFrames that don't have a _src_ value. [#242](https://github.com/davidjbradshaw/iframe-resizer/issues/242) Fix issue where iFrame is removed and then put back with same ID [[Alban Mouton](https://github.com/albanm)]
- v3.0.0 Added _taggedElement_ size calculation method. [#199](https://github.com/davidjbradshaw/iframe-resizer/issues/199) Added in page options to iFrame. [#70](https://github.com/davidjbradshaw/iframe-resizer/issues/70) Added width calculation method options. Added methods to bound iFrames to comunicate from parent to iFrame. Ignore calls to setup an already bound iFrame. Improved event handling. Refactored MutationObserver functions. Moved IE8 polyfil from docs to own JS file and added _Funtion.prototype.bind()_. Added detection for tab focus. Fixed bug with nested inPageLinks. Public methods in iFrame now always enabled and option removed. Renamed enableInPageLinks to inPageLinks. Added double iFrame example
- v2.8.10 Fixed bug with resizeFrom option not having default value in iFrame, if called from old version in parent page
- v2.8.9 [#220](https://github.com/davidjbradshaw/iframe-resizer/issues/220) Switched from using _deviceorientation_ to _orientationchange_ event listner [[Brandon Kobel]/https://github.com/kobelb)]
- v2.8.8 [#213](https://github.com/davidjbradshaw/iframe-resizer/issues/213) Ensure onInit fires when iFrame not sized during initialisation. Check autoResize option before resizing from parent. Lower message about resize before initialisation from 'warn' to 'log'. Updated hover example
- v2.8.7 [#205](https://github.com/davidjbradshaw/iframe-resizer/issues/205) Fix race condition when page resized during page init [[Ian Caunce](https://github.com/IanCaunce)]. [#203](https://github.com/davidjbradshaw/iframe-resizer/issues/203) Added option for _checkOrigin_ to have list of allowed domains for the iFrame [[Andrej Golcov](https://github.com/andrej2k)]. [#202](https://github.com/davidjbradshaw/iframe-resizer/issues/202) Handle script being loaded more than once [[Nickolay Ribal](https://github.com/elektronik2k5)].
[#167](https://github.com/davidjbradshaw/iframe-resizer/issues/167) Added WebPack support [[Stephan Salat](https://github.com/ssalat)]
- v2.8.6 [#163](https://github.com/davidjbradshaw/iframe-resizer/issues/163) Moved window resize event detection from iFrame to parent page. [#160](https://github.com/davidjbradshaw/iframe-resizer/issues/160) Warn, rather than error, if iFrame has been unexpectantly removed from page. The _parentIFrame.close()_ method nolonger calls _onResized()_
- v2.8.5 [#173](https://github.com/davidjbradshaw/iframe-resizer/issues/173) Scope settings to iFrame. [#171](https://github.com/davidjbradshaw/iframe-resizer/issues/171) Fixed _parentIFrame.close()_ to work with 0 height iframes [Both [Reed Dadoune](https://github.com/ReedD)]
- v2.8.4 Added switch for inPageLinking support
- v2.8.3 Throw error if passed a non-DOM object
- v2.8.2 [#145](https://github.com/davidjbradshaw/iframe-resizer/issues/145) Fixed in page links, to work with HTML IDs that are not valid CSS IDs [[Erin Millard](https://github.com/ezzatron)]. Moved map files from src to js folder. Added to NPM
- v2.8.1 [#138](https://github.com/davidjbradshaw/iframe-resizer/issues/138) Added option to pass in iFrame object, instead of selector
- v2.8.0 [#68](https://github.com/davidjbradshaw/iframe-resizer/issues/68) Added support for in page links and _onScroll()_ function. [#140](https://github.com/davidjbradshaw/iframe-resizer/issues/140) Added listener for _transitionend_ event [[Mat Brown](https://github.com/outoftime)]. Added listeners for animation events. Added listener for _deviceorientation_ event. Improved logging for nested iFrames
- v2.7.1 [#131](https://github.com/davidjbradshaw/iframe-resizer/issues/131) Fix code that works out position of iFrame on host page
- v2.7.0 [#129](https://github.com/davidjbradshaw/iframe-resizer/issues/129) Parse data passed to _parentIFrame.sendMessage()_ into JSON to allow complex data types to be sent to _onMessage()_
- v2.6.5 [#107](https://github.com/davidjbradshaw/iframe-resizer/issues/107) Added Node support for use with Browserify
- v2.6.4 [#115](https://github.com/davidjbradshaw/iframe-resizer/issues/115) Added _parentIFrame.scrollToOffset()_ method
- v2.6.3 [#115](https://github.com/davidjbradshaw/iframe-resizer/issues/115) Fixed issue with the range check sometimes causing non-resizing messages to be rejected
- v2.6.2 [#104](https://github.com/davidjbradshaw/iframe-resizer/issues/104) Fixed issue with jQuery.noConflict [[Dmitry Mukhutdinov](https://github.com/flyingleafe)]
- v2.6.1 [#91](https://github.com/davidjbradshaw/iframe-resizer/issues/91) Fixed issue with jQuery version requiring empty object if no options are being set
- v2.6.0 Added _parentIFrame.scrollTo()_ method. Added _Tolerance_ option. [#85](https://github.com/davidjbradshaw/iframe-resizer/issues/85) Update troubleshooting guide [[Kevin Sproles](https://github.com/kevinsproles)]
- v2.5.2 [#67](https://github.com/davidjbradshaw/iframe-resizer/issues/67) Allow lowercase `<iframe>` tags for XHTML complience [[SlimerDude](https://github.com/SlimerDude)]. [#69](https://github.com/davidjbradshaw/iframe-resizer/issues/69) Fix watch task typo in gruntfile.js [[Matthew Hupman](https://github.com/mhupman)]. Remove trailing comma in heightCalcMethods array [#76](https://github.com/davidjbradshaw/iframe-resizer/issues/76) [[Fabio Scala](https://github.com/fabioscala)]
- v2.5.1 [#58](https://github.com/davidjbradshaw/iframe-resizer/issues/58) Fixed endless loop and margin issues with an unnested mid-tier iframe. [#59](https://github.com/davidjbradshaw/iframe-resizer/issues/59) Fixed main property of [Bower](https://github.com/https://bower.io/) config file
- v2.5.0 Added _minHeight_, _maxHeight_, _minWidth_ and _maxWidth_ options. Added _onInit_ and _onClosed_ functions (Close event calling _onResized_ is deprecated). Added **grow** and **lowestElement** _heightCalculationMethods_. Added AMD support. [#52](https://github.com/davidjbradshaw/iframe-resizer/issues/52) Added _sendMessage_ example. [#54](https://github.com/davidjbradshaw/iframe-resizer/issues/54) Work around IE8's borked JS execution stack. [#55](https://github.com/davidjbradshaw/iframe-resizer/issues/55) Check datatype of passed in options
- v2.4.8 Fix issue when message passed to onMessage contains a colon
- v2.4.7 [#49](https://github.com/davidjbradshaw/iframe-resizer/issues/49) Deconflict requestAnimationFrame
- v2.4.6 [#46](https://github.com/davidjbradshaw/iframe-resizer/issues/46) Fix iFrame event listener in IE8
- v2.4.5 [#41](https://github.com/davidjbradshaw/iframe-resizer/issues/41) Prevent error in FireFox when body is hidden by CSS [[Scott Otis](https://github.com//Scotis)]
- v2.4.4 Enable nested iFrames ([#31](https://github.com/davidjbradshaw/iframe-resizer/issues/31) Filter incoming iFrame message in host-page script. [#33](https://github.com/davidjbradshaw/iframe-resizer/issues/33) Squash unexpected message warning when using nested iFrames. Improved logging for nested iFrames). [#38](https://github.com/davidjbradshaw/iframe-resizer/issues/38) Detect late image loads that cause a resize due to async image loading in WebKit [[Yassin](https://github.com//ynh)]. Fixed :Hover example in FireFox. Increased trigger timeout lock to 64ms
- v2.4.3 Simplified handling of double fired events. Fixed test coverage
- v2.4.2 Fix missing 'px' unit when resetting height
- v2.4.1 Fix screen flicker issue with scroll height calculation methods in v2.4.0
- v2.4.0 Improved handling of alternate sizing methods, so that they will now shrink on all trigger events, except _Interval_. Prevent error when incoming message to iFrame is an object
- v2.3.2 Fix backwards compatibility issue between V2 iFrame and V1 host-page scripts
- v2.3.1 Added setHeightCalculationMethod() method in iFrame. Added _min_ option to the height calculation methods. Invalid value for _heightCalculationMethod_ is now a warning rather than an error and now falls back to the default value
- v2.3.0 Added extra _heightCalculationMethod_ options. Inject clearFix into 'body' to work around CSS floats preventing the height being correctly calculated. Added meaningful error message for non-valid values in _heightCalculationMethod_. Stop **click** events firing for 50ms after **size** events. Fixed hover example in old IE
- v2.2.3 [#26](https://github.com/davidjbradshaw/iframe-resizer/issues/26) Locally scope jQuery to \$, so there is no dependancy on it being defined globally
- v2.2.2 [#25](https://github.com/davidjbradshaw/iframe-resizer/issues/25) Added click listener to Window, to detect CSS checkbox resize events
- v2.2.1 [#24](https://github.com/davidjbradshaw/iframe-resizer/issues/24) Prevent error when incoming message to host page is an object [[Torjus Eidet](https://github.com/torjue)]
- v2.2.0 Added targetOrigin option to sendMessage function. Added bodyBackground option. Expanded troubleshooting section
- v2.1.1 [#16](https://github.com/davidjbradshaw/iframe-resizer/issues/16) Option to change the height calculation method in the iFrame from offsetHeight to scrollHeight. Troubleshooting section added to docs
- v2.1.0 Added sendMessage() and getId() to window.parentIFrame. Changed width calculation to use scrollWidth. Removed deprecated object name in iFrame
- v2.0.0 Added native JS public function, renamed script filename to reflect that jQuery is now optional. Renamed _do(Heigh/Width)_ to _size(Height/Width)_, renamed _contentWindowBodyMargin_ to _bodyMargin_ and renamed _callback_ _onResized_. Improved logging messages. Stop _resize_ event firing for 50ms after _interval_ event. Added multiple page example. Workout unsized margins inside the iFrame. The _bodyMargin_ property now accepts any valid value for a CSS margin. Check message origin is iFrame. Removed deprecated methods
- v1.4.4 Fixed _bodyMargin_ bug
- v1.4.3 CodeCoverage fixes. Documentation improvements
- v1.4.2 Fixed size(250) example in IE8
- v1.4.1 Setting `interval` to a negative number now forces the interval test to run instead of [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver)
- v1.4.0 [#12](https://github.com/davidjbradshaw/iframe-resizer/issues/12) Option to enable scrolling in iFrame, off by default. [#13](https://github.com/davidjbradshaw/iframe-resizer/issues/13) Bower dependancies updated
- v1.3.7 Stop _resize_ event firing for 50ms after _size_ event. Added size(250) to example
- v1.3.6 [#11](https://github.com/davidjbradshaw/iframe-resizer/issues/11) Updated jQuery to v1.11.0 in example due to IE11 having issues with jQuery v1.10.1
- v1.3.5 Documentation improvements. Added Grunt-Bump to build script
- v1.3.0 IFrame code now uses default values if called with an old version of the host page script. Improved function naming. Old names have been deprecated and removed from docs
- v1.2.5 Fix publish to [plugins.jquery.com](https://plugins.jquery.com)
- v1.2.0 Added autoResize option, added height/width values to iFrame public size function, set HTML tag height to auto, improved documentation [All [Jure Mav](https://github.com/jmav)]. Plus setInterval now only runs in browsers that don't support [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) and is on by default, sourceMaps added and close() method introduced to parentIFrame object in iFrame
- v1.1.1 Added event type to messageData object
- v1.1.0 Added DOM [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) trigger to better detect content changes in iFrame, [#7](https://github.com/davidjbradshaw/iframe-resizer/issues/7) Set height of iFrame body element to auto to prevent resizing loop, if it's set to a percentage
- v1.0.3 [#6](https://github.com/davidjbradshaw/iframe-resizer/issues/6) Force incoming messages to string. Migrated to Grunt 4.x. Published to Bower
- v1.0.2 [#2](https://github.com/davidjbradshaw/iframe-resizer/issues/2) mime-type changed for IE8-10
- v1.0.0 Initial pubic release.

View File

@ -0,0 +1,83 @@
# Contributing to iframe-resizer
Looking to contribute something? **Here's how you can help.**
Please take a moment to review this document in order to make the contribution
process easy and effective for everyone involved.
## Using the issue tracker
The [issue tracker](https://github.com/davidjbradshaw/iframe-resizer/issues) is
the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
and [submitting pull requests](#pull-requests).
**Please do not use the issue tracker for personal support requests. These should be raised on
Stack Overflow ([`iframe-resizer`](https://stackoverflow.com/questions/tagged/iframe-resizer) tag).**
## Bug reports
A bug is a _demonstrable problem_ that is caused by the code in the repository.
Good bug reports are extremely helpful, so thanks!
Guidelines for bug reports:
0. **Lint your code** &mdash; Use [jshint](https://jshint.com/)
to ensure your problem isn't caused by a simple error in your own code.
1. **Use the GitHub issue search** &mdash; check if the issue has already been
reported.
1. **Check if the issue has been fixed** &mdash; try to reproduce it using the
latest `master` or development branch in the repository.
1. **Isolate the problem** &mdash; ideally create a [reduced test
case](https://css-tricks.com/reduced-test-cases/) and a live example.
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? Do other browsers show the bug differently? What
would you expect to be the outcome? All these details will help people to fix
any potential bugs.
Example:
> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` - a link to the reduced test case
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea
fits with the scope and aims of the project.
## Pull requests
Good pull requests—patches, improvements, new features—are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.
**Please ask first** before embarking on any significant pull request (e.g.
implementing features or refactoring code),
otherwise you risk spending a lot of time working on something that the
project's developers might not want to merge into the project.
In lieu of a formal style-guide, take care to maintain the existing coding
style. Add unit tests for any new or changed functionality. Lint and test
your code using [Grunt](https://gruntjs.com/).
## License
By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).

View File

@ -0,0 +1,5 @@
# Donate to Iframe-Resizer
Iframe-resizer is the result of many 100s of hours of work, if you would like to join others in showing support for the development of this project, then please feel free to buy me a coffee.
<a href="https://www.buymeacoffee.com/davidjbradshaw " target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

21
iframe-resizer-master/LICENSE Executable file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2013-2021 David J. Bradshaw
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

106
iframe-resizer-master/README.md Executable file
View File

@ -0,0 +1,106 @@
# iFrame Resizer V4
[![NPM version](https://badge.fury.io/js/iframe-resizer.svg)](https://badge.fury.io/js/iframe-resizer)
[![NPM Downloads](https://img.shields.io/npm/dm/iframe-resizer.svg)](https://npm-stat.com/charts.html?package=iframe-resizer&from=2014-12-31)
[![](https://data.jsdelivr.com/v1/package/npm/iframe-resizer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/iframe-resizer)
[![Coverage Status](https://coveralls.io/repos/davidjbradshaw/iframe-resizer/badge.svg?branch=master&service=github)](https://coveralls.io/github/davidjbradshaw/iframe-resizer)
[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://www.paypal.me/davidjbradshaw)
This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include:
- Height and width resizing of the iFrame to content size.
- Works with multiple and nested iFrames.
- Domain authentication for cross domain iFrames.
- Provides a range of page size calculation methods to support complex CSS layouts.
- Detects changes to the DOM that can cause the page to resize using [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver).
- Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
- Simplified messaging between iFrame and host page via [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage).
- Fixes in page links in iFrame and supports links between the iFrame and parent page.
- Provides custom sizing and scrolling methods.
- Exposes parent position and viewport size to the iFrame.
- Provides `onMouseEnter` and `onMouseLeave` events for the iFrame.
- Works with [ViewerJS](https://viewerjs.org/) to support PDF and ODF documents.
- Supports IE 11 ([V3 supports back to IE8](https://github.com/davidjbradshaw/iframe-resizer/tree/V3))
## Donate
Iframe-resizer is the result of many 100s of hours of work, if you would like to join others in showing support for the continued development of this project, then please feel free to buy me a coffee.
<a href="https://www.buymeacoffee.com/davidjbradshaw " target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
## Getting Started
### Install
This package can be installed via NPM (`npm install iframe-resizer --save`).
### Usage
The package contains two minified JavaScript files in the [js](https://github.com/davidjbradshaw/iframe-resizer/tree/master/js) folder. The first ([iframeResizer.min.js](https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js)) is for the page hosting the iFrames. It can be called with via JavaScript:
```js
const iframes = iFrameResize( [{options}], [css selector] || [iframe] );
```
The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)) needs placing in the page(s) contained within your iFrame. <i>This file is designed to be a guest on someone else's system, so has no dependencies and won't do anything until it's activated by a message from the containing page</i>.
### Typical setup
The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.
```html
<style>
iframe {
width: 1px;
min-width: 100%;
}
</style>
<script src="/js/iframeResizer.min.js"></script>
<iframe id="myIframe" src="https://anotherdomain.com/iframe.html"></iframe>
<script>
iFrameResize({ log: true }, '#myIframe')
</script>
```
**Note:** Using _min-width_ to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
If you have problems, check the [troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/troubleshooting.md) section.
### Example
To see this working take a look at this [example](https://davidjbradshaw.com/iframe-resizer/example/) and watch the [console](https://developer.mozilla.org/en-US/docs/Tools/Web_Console).
## API Documentation
IFrame-Resizer provides an extensive range of options and APIs for both the parent page and the iframed page.
- **Parent Page API**
- [Options](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/options.md)
- [Events](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/events.md)
- [Methods](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/methods.md)
- **IFramed Page API**
- [Options](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/options.md)
- [Events](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/events.md)
- [Methods](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/methods.md)
- **Use with Libraries and Frameworks**
- [React](https://github.com/davidjbradshaw/iframe-resizer-react)
- [Vue](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/vue.md)
- [Angular](https://github.com/davidjbradshaw/iframe-resizer/issues/478#issuecomment-347958630)
- [Ember](https://github.com/alexlafroscia/ember-iframe-resizer-modifier)
- [jQuery](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/jquery.md)
- [Google Apps Script](https://stackoverflow.com/a/65724113/2087070)
- [Troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/troubleshooting.md)
- [Upgrade from version 3](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/upgrade.md)
- [Version history](https://github.com/davidjbradshaw/iframe-resizer/blob/master/CHANGELOG.md)
## License
Copyright &copy; 2013-21 [David J. Bradshaw](https://github.com/davidjbradshaw) -
Licensed under the [MIT License](LICENSE)
<!--
[![NPM](https://nodei.co/npm/iframe-resizer.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/iframe-resizer/)
[![Build Status](https://travis-ci.org/davidjbradshaw/iframe-resizer.svg?branch=master)](https://travis-ci.org/davidjbradshaw/iframe-resizer)
[![Known Vulnerabilities](https://snyk.io/test/github/davidjbradshaw/iframe-resizer/badge.svg)](https://snyk.io/test/github/davidjbradshaw/iframe-resizer)
-->

View File

@ -0,0 +1,34 @@
{
"name": "iframe-resizer",
"version": "4.3.2",
"homepage": "https://github.com/davidjbradshaw/iframe-resizer",
"authors": ["David J. Bradshaw <dave@bradshaw.net>"],
"description": "Responsively keep same and cross domain iFrames sized to their content with support for window/content resizing, multiple and nested iFrames. (Dependacy free and works with IE8+)",
"main": ["js/iframeResizer.js", "js/iframeResizer.contentWindow.js"],
"keywords": [
"CrossDomain",
"Cross-Domain",
"iFrame",
"Resizing",
"Resizer",
"postMessage",
"content",
"resize",
"height",
"autoheight",
"auto-height",
"iframe-auto-height",
"height-iframe",
"heightiframe",
"width",
"mutationObserver",
"RWD",
"responsive",
"responsiveiframes",
"responsive-iframes"
],
"license": "MIT",
"ignore": ["example", "test", "gruntfile.js", "*.md", "*.json"],
"dependencies": {},
"devDependencies": {}
}

View File

@ -0,0 +1,40 @@
## Getting Started
### Install
This package can be installed via NPM (`npm install iframe-resizer --save`).
### Usage
The package contains two minified JavaScript files in the [js](../js) folder. The first ([iframeResizer.min.js](https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js)) is for the page hosting the iFrames. It can be called with **native** JavaScript;
```js
const iframes = iFrameResize( [{options}], [css selector] || [iframe] );
```
The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)) needs placing in the page(s) contained within your iFrame. <i>This file is designed to be a guest on someone else's system, so has no dependencies and won't do anything until it's activated by a message from the containing page</i>.
### Typical setup
The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.
```html
<style>
iframe {
width: 1px;
min-width: 100%;
}
</style>
<iframe id="myIframe" src="https://anotherdomain.com/iframe.html"></iframe>
<script>
iFrameResize({ log: true }, '#myIframe')
</script>
```
**Note:** Using _min-width_ to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
If you have problems, check the [troubleshooting](troubleshooting.md) section.
### Example
To see this working take a look at this [example](https://davidjbradshaw.com/iframe-resizer/example/) and watch the [console](https://developer.mozilla.org/en-US/docs/Tools/Web_Console).

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](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.

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 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.

View File

@ -0,0 +1,67 @@
## Events
The following callback events can be passed to iframe-resizer on the parent page, as part of the [options](options.md) object.
### onClose
```js
onClose: (iframeID) => boolean
```
Called before iFrame is closed via `parentIFrame.close()` or `iframe.iFrameResizer.close()` methods. Returning `false` will prevent the iFrame from closing.
### onClosed
```js
onClosed: (iframeID) => undefined
```
Called after iFrame is closed via `parentIFrame.close()` or `iframe.iFrameResizer.close()` methods.
### onInit
```js
onInit: (iframe) => undefined
```
Called after initial setup.
### onMessage
```js
onMessage: ({iframe,message}) => undefined
```
Receive message posted from iFrame with the `parentIFrame.sendMessage()` method.
### onMouseEnter
```js
onMouseEnter: ({iframe,height,width,type}) => undefined
```
Function called after the mouse enters the iframe. Passes `messageData` object containing the **iFrame**, **screenX**, **screenY** and the **type** of event that triggered the callback.
### onMouseLeave
```js
onMouseLeave: ({iframe,height,width,type}) => undefined
```
Function called after the mouse leaves the iframe. Passes `messageData` object containing the **iFrame**, **screenX**, **screenY** and the **type** of event that triggered the callback.
### onResized
```js
onResized: ({iframe,height,width,type}) => undefined
```
Function called after iFrame resized. Passes `messageData` object containing the **iFrame**, **height**, **width** and the **type** of event that triggered the iFrame to resize.
### onScroll
```js
onScroll: ({x,y}) => [true|false]
```
Called before the page is repositioned after a request from the iFrame, due to either an in page link, or a direct request from either [parentIFrame.scrollTo()](../iframed_page/methods.md#scrolltoxy) or [parentIFrame.scrollToOffset()](../iframed_page/methods.md#scrolltooffsetxy). If this function returns **false**, it will stop the library from repositioning the page, so that you can implement your own animated page scrolling instead.

View File

@ -0,0 +1,23 @@
## IFrame Object Methods
Once the iFrame has been initialized, an `iFrameResizer` object is bound to it. This has the following methods available.
### close()
Remove the iFrame from the page.
### moveToAnchor(anchor)
Move to anchor in iFrame.
### removeListeners()
Detach event listeners from iFrame. This is option allows Virtual DOMs to remove an iFrame tag. It should not normally be required.
### resize()
Tell the iFrame to resize itself.
### 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, in case your iFrame navigates away to another domain.

View File

@ -0,0 +1,162 @@
## Options
The following options can be passed to iframe-resizer on the parent page.
### log
default: false
type: boolean
Setting the `log` option to true will make the scripts in both the host page and the iFrame output everything they do to the JavaScript console so you can see the communication between the two scripts.
### autoResize
default: true
type: boolean
When enabled changes to the Window size or the DOM will cause the iFrame to resize to the new content size. Disable if using size method with custom dimensions.
<i>Note: When set to false the iFrame will still inititally size to the contained content, only additional resizing events are disabled.</i>
### bodyBackground
default: null
type: string
Override the body background style in the iFrame.
### bodyMargin
default: null
type: string || number
Override the default body margin style in the iFrame. A string can be any valid value for the CSS margin attribute, for example '8px 3em'. A number value is converted into px.
### bodyPadding
default: null
type: string || number
Override the default body padding style in the iFrame. A string can be any valid value for the CSS margin attribute, for example '8px 3em'. A number value is converted into px.
### checkOrigin
default: true
type: boolean || array
When set to true, only allow incoming messages from the domain listed in the `src` property of the iFrame tag. If your iFrame navigates between different domains, ports or protocols; then you will need to provide an array of URLs or disable this option.
### inPageLinks
default: false
type: boolean
When enabled in page linking inside the iFrame and from the iFrame to the parent page will be enabled.
### heightCalculationMethod
default: 'bodyOffset'
values: 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' |
'max' | 'min' | 'grow' | 'lowestElement' | 'taggedElement'
By default the height of the iFrame is calculated by converting the margin of the `body` to <i>px</i> and then adding the top and bottom figures to the offsetHeight of the `body` tag.
In cases where CSS styles causes the content to flow outside the `body` you may need to change this setting to one of the following options. Each can give different values depending on how CSS is used in the page and each has varying side-effects. You will need to experiment to see which is best for any particular circumstance.
* **bodyOffset** uses `document.body.offsetHeight`
* **bodyScroll** uses `document.body.scrollHeight` <sup>*</sup>
* **documentElementOffset** uses `document.documentElement.offsetHeight`
* **documentElementScroll** uses `document.documentElement.scrollHeight` <sup>*</sup>
* **max** takes the largest value of the main four options <sup>*</sup>
* **min** takes the smallest value of the main four options <sup>*</sup>
* **lowestElement** Loops though every element in the DOM and finds the lowest bottom point <sup></sup>
* **taggedElement** Finds the bottom of the lowest element with a `data-iframe-height` attribute
<i>Notes:</i>
<i>**If the default option doesn't work then the best solutions is to use either** taggedElement, **or** lowestElement</i>**.** Alternatively it is possible to add your own custom sizing method directly inside the iFrame, see the [iFrame Page Options](../iframed_page/options.md) section for more details.
<sup></sup> <i>The **lowestElement** option is the most reliable way of determining the page height. However, it does have a performance impact, as it requires checking the position of every element on the page. The **taggedElement** option provides much greater performance by limiting the number of elements that need their position checked</i>.
<sup>*</sup> These methods can cause screen flicker in some browsers.
### maxHeight / maxWidth
default: infinity
type: integer
Set maximum height/width of iFrame.
### minHeight / minWidth
default: 0
type: integer
Set minimum height/width of iFrame.
### resizeFrom
default: 'parent'
values: 'parent', 'child'
Listen for resize events from the parent page, or the iFrame. Select the 'child' value if the iFrame can be resized independently of the browser window. <i>Selecting this value can cause issues with some height calculation methods on mobile devices</i>.
### scrolling
default: false
type: boolean | 'omit'
Enable scroll bars in iFrame.
* **true** applies `scrolling="yes"`
* **false** applies `scrolling="no"`
* **'omit'** applies no `scrolling` attribute to the iFrame
### sizeHeight
default: true
type: boolean
Resize iFrame to content height.
### sizeWidth
default: false
type: boolean
Resize iFrame to content width.
### tolerance
default: 0
type: integer
Set the number of pixels the iFrame content size has to change by, before triggering a resize of the iFrame.
### widthCalculationMethod
default: 'scroll'
values: 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' |
'max' | 'min' | 'scroll' | 'rightMostElement' | 'taggedElement'
By default the width of the page is worked out by taking the greater of the **documentElement** and **body** scrollWidth values.
Some CSS techniques may require you to change this setting to one of the following options. Each can give different values depending on how CSS is used in the page and each has varying side-effects. You will need to experiment to see which is best for any particular circumstance.
* **bodyOffset** uses `document.body.offsetWidth`
* **bodyScroll** uses `document.body.scrollWidth` <sup>*</sup>
* **documentElementOffset** uses `document.documentElement.offsetWidth`
* **documentElementScroll** uses `document.documentElement.scrollWidth` <sup>*</sup>
* **scroll** takes the largest value of the two scroll options <sup>*</sup>
* **max** takes the largest value of the main four options <sup>*</sup>
* **min** takes the smallest value of the main four options <sup>*</sup>
* **rightMostElement** Loops though every element in the DOM and finds the right most point <sup></sup>
* **taggedElement** Finds the left most element with a `data-iframe-width` attribute
Alternatively it is possible to add your own custom sizing method directly inside the iFrame, see the [iFrame Page Options](../iframed_page/options.md) section for more details
<sup></sup> <i>The **rightMostElement** option is the most reliable way of determining the page width. However, it does have a performance impact as it requires calculating the position of every element on the page. The **taggedElement** option provides much greater performance by limiting the number of elements that need their position checked.</i>
<sup>*</sup> These methods can cause screen flicker in some browsers.

View File

@ -0,0 +1,19 @@
# iFrame-Resizer Documentation
- [Getting Started](getting_started.md)
- **Parent Page API**
- [Options](parent_page/options.md)
- [Events](parent_page/events.md)
- [Methods](parent_page/methods.md)
- **IFramed Page API**
- [Options](iframed_page/options.md)
- [Events](iframed_page/events.md)
- [Methods](iframed_page/methods.md)
- **Use with Libraries and Frameworks**
- [React](https://github.com/davidjbradshaw/iframe-resizer-react)
- [Vue](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/vue.md)
- [Angular](https://github.com/davidjbradshaw/iframe-resizer/issues/478#issuecomment-347958630)
- [jQuery](use_with/jquery.md)
- [Troubleshooting](troubleshooting.md)
- [Upgrade from version 3](upgrade.md)
- [Version history](../CHANGELOG.md)

View File

@ -0,0 +1,119 @@
## Troubleshooting
The first steps to investigate a problem is to make sure you are using the latest version and then enable the [log](#log) option, which outputs everything that happens to the [JavaScript Console](https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console). This will enable you to see what both the iFrame and host page are up to and also see any JavaScript error messages.
Solutions for the most common problems are outlined in this section. If you need further help, then please ask questions on [StackOverflow](https://stackoverflow.com/questions/tagged/iframe-resizer) with the `iframe-resizer` tag.
Bug reports and pull requests are welcome on the [issue tracker](https://github.com/davidjbradshaw/iframe-resizer/issues). Please read the [contributing guidelines](https://github.com/davidjbradshaw/iframe-resizer/blob/master/CONTRIBUTING.md) before opening a ticket, as this will ensure a faster resolution.
### Multiple IFrames on one page
When the resizer does not work using multiple IFrames on one page, make sure that each frame has an unique id or no ids at all.
### IFrame not sizing correctly
If a larger element of content is removed from the normal document flow, through the use of absolute positioning, it can prevent the browser working out the correct size of the page. In such cases you can change the [heightCalculationMethod](./parent_page/options.md#heightcalculationmethod) to uses one of the other sizing methods.
### IFrame not downsizing
The most likely cause of this problem is having set the height of an element to be 100% of the page somewhere in your CSS. This is normally on the `html` or `body` elements, but it could be on any element in the page. This can sometimes be got around by using the `taggedElement` height calculation method and added a `data-iframe-height` attribute to the element that you want to define the bottom position of the page. You may find it useful to use `position: relative` on this element to define a bottom margin or allow space for a floating footer.
Not having a valid [HTML document type](https://en.wikipedia.org/wiki/Document_type_declaration) in the iFrame can also sometimes prevent downsizing. At it's most simplest this can be the following.
```html
<!DOCTYPE html>
```
### IFrame not resizing
The most common cause of this is not placing the [iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js) script inside the iFramed page. If the other page is on a domain outside your control and you can not add JavaScript to that page, then now is the time to give up all hope of ever getting the iFrame to size to the content. As it is impossible to work out the size of the contained page, without using JavaScript on both the parent and child pages.
### IFrame not detecting CSS :hover events
If your page resizes via CSS `:hover` events, these won't be detected by default. It is however possible to create `mouseover` and `mouseout` event listeners on the elements that are resized via CSS and have these events call the [parentIFrame.size()](##parentiframesize-customheight-customwidth) method. With jQuery this can be done as follows
```js
function resize(){
if ('parentIFrame' in window) {
// Fix race condition in FireFox with setTimeout
setTimeout(parentIFrame.size.bind(parentIFrame),0);
}
}
$(*Element with hover style*).hover(resize);
```
### IFrame not detecting textarea resizes
Both FireFox and the WebKit based browsers allow the user to resize `textarea` input boxes. Unfortunately the WebKit browsers don't trigger the mutation event when this happens. This can be worked around to some extent with the following code.
```js
function store() {
this.x = this.offsetWidth
this.y = this.offsetHeight
}
$('textarea')
.each(store)
.on('mouseover mouseout', function() {
if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
store.call(this)
if ('parentIFrame' in window) {
parentIFrame.size()
}
}
})
```
### IFrame flickers
Some of the alternate [height calculation methods](./parent_page/options.md#heightcalculationmethod), such as **max** can cause the iFrame to flicker. This is due to the fact that to check for downsizing, the iFrame first has to be downsized before the new height can be worked out. This effect can be reduced by setting a [minSize](./docs/parent_page/options.md#minheight--minwidth) value, so that the iFrame is not reset to zero height before regrowing.
In modern browsers, if the default [height calculation method](./parent_page/options.md#heightcalculationmethod) does not work, then it is normally best to use **taggedElement** or **lowestElement**, which are both flicker free.
<i>Please see the notes section under [heightCalculationMethod](./parent_page/options.md#heightcalculationmethod) to understand the limitations of the different options.</i>
### Localhost 127.0.0.1 and file:///
When an iframe is located on your local machine the browser adds extra security restrictions to cross-domain iframes. These will stop iframe-resizer from functioning. If you need to test something locally, then it is best to use the external IP Address of the machine.
### Failed to execute 'postMessage' on 'DOMWindow'
This error occurs when the parent window tries to send a message to the iframe before it has loaded. IFrameResize makes multiple attempts to talk to the iFrame, so if everything is working then you can safely ignore this error message.
If you're still having problems, or you really want to not ignore the error, then you can try delaying the call to `iframeResize()` until after the `onLoad` event of the iframe has fired.
If this does not fix the problem then check `x-Frame-Options` http header on the server that is sending the iframe content, as this can also block calls to `postMessage` if set incorrectly.
### ParentIFrame not found errors
The `parentIFrame` object is created once the iFrame has been initially resized. If you wish to use it during page load you will need call it from the onReady.
```html
<script>
window.iFrameResizer = {
onReady: function() {
var myId = window.parentIFrame.getId()
console.log('The ID of the iFrame in the parent page is: ' + myId)
}
}
</script>
<script src="js/iframeresizer.contentwindow.js"></script>
```
### PDF and OpenDocument files
It is not possible to add the required JavaScript to PDF and ODF files. However, you can get around this limitation by using [ViewerJS](https://viewerjs.org/) to render these files inside a HTML page, that also contains the iFrame JavaScript file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)).
### Unexpected message received error
By default the origin of incoming messages is checked against the `src` attribute of the iFrame. If they don't match an error is thrown. This behaviour can be disabled by setting the [checkOrigin](./docs/parent_page/options.md#checkorigin) option to **false**.
### Width not resizing
By default only changes in height are detected, if you want to calculate the width you need to set the `sizeWidth` option to true and the `sizeHeight` option to false.
### Frame has not responded within 5 seconds
This can happen when postMessage is being blocked in browser. There could be multiple reasons to that but in some cases we found that RocketLoader extension within Cloudflare was the reason. Try disabling it if you are using cloudflare.

View File

@ -0,0 +1,5 @@
## Upgrading to version 4
In version 4 support for IE 8-10 and Andriod 4.4 has been removed, if you still need this then please use [version 3](https://github.com/davidjbradshaw/iframe-resizer/tree/V3) of this library.
The callback methods have been renamed to onEvents, so for example `scrollCallback` is now called `onScroll`. This is to enable better integration with modern libraries such as React.

View File

@ -0,0 +1,7 @@
## jQuery
If jQuery is detected on the page, then this library provides a simple jQuery interface.
```js
$('iframe').iFrameResize([{ options }])
```

View File

@ -0,0 +1,30 @@
## Vue
Create the following Vue directive
```js
import Vue from 'vue'
import iframeResize from 'iframe-resizer/js/iframeResizer';
Vue.directive('resize', {
bind: function(el, { value = {} }) {
el.addEventListener('load', () => iframeResize(value, el))
},
unbind: function (el) {
el.iFrameResizer.removeListeners();
}
})
```
and then include it on your page as follows.
```html
<iframe
v-resize="{ log: true }"
width="100%"
src="myiframe.html"
frameborder="0"
></iframe>
```
- Thanks to [Aldebaran Desombergh](https://github.com/davidjbradshaw/iframe-resizer/issues/513#issuecomment-538333854) for this example

View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
a.back {
float: right;
margin-left: 8px;
}
body {
border: solid 1px red;
}
p {
padding: 5px 212px 5px 5px;
margin: 0 0 5px;
}
#abs {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 600px;
background-color: wheat;
}
a.top {
position: absolute;
bottom: 0;
right: 0;
margin: 5px;
}
</style>
</head>
<body>
<p>
<b>iFrame</b>
<a href="frame.content.html" class="back">Back to page 1</a>
&nbsp;
<a
href="#"
class=" back"
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,99999);return false;"
>Bottom</a
>
&nbsp;
<a
href="#"
class=" back"
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollToOffset(0,0);return false;"
>Scroll to iFrame</a
>
&nbsp;
<a href="#test" class="back">Jump to iFrame anchor</a>
<a href="#anchorParentTest" class="back">Jump to parent anchor</a>
</p>
<p>
This page has an absolute position element that take it out side the
normal document body, which is marked with a red border on this page. This
prevents the normal height calculation, which is based on the body tag
from returning the correct height. To work around this you can set the
<b>heightCalculationMethod</b> option to use one of the other page height
properties.
</p>
<p>
Use the dropdown to change the sizing method of the page, select the
different sizing options to see how the effect the page. Note that they
can have different effects in different browsers, so you are normally best
off selecting <b>max</b> if you need to change away from the default
<b>bodyOffset</b> option.
</p>
<p data-iframe-height>
<b>Height Calculation Method</b>
<select name="heightCalculationMethod">
<option>bodyOffset</option>
<option>bodyScroll</option>
<option>documentElementOffset</option>
<option>documentElementScroll</option>
<option>max</option>
<option>min</option>
<option>grow</option>
<option>lowestElement</option>
<option>taggedElement</option>
</select>
</p>
<p>
<i
>This option should be used sparingly, as the alternate methods can be
less accurate at working out the correct page size, can cause screen
flicker and can sometimes fail to reduce in size when the frame content
changes in browsers that do not support mutationObservers (See
<a href="https://caniuse.com/mutationobserver">caniuse.com</a> for
details).</i
>
</p>
<a name="test">Test in page anchor</a>
<div id="abs">
Absolute positioned element
<a
href="#"
class="top"
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,0);return false;"
>Top</a
>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script
type="text/javascript"
src="../js/iframeResizer.contentWindow.min.js"
></script>
<script>
$('select').on('change', function() {
if ('parentIFrame' in window) {
parentIFrame.setHeightCalculationMethod($(this).val())
parentIFrame.size()
}
})
</script>
</body>
</html>

View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
*,
*:before,
*:after {
box-model: border-box;
}
a {
float: right;
margin-left: 10px;
}
</style>
</head>
<body>
<b>iFrame</b>
<a href="#" onclick="$('p:eq(0)').toggle();return false;">Toggle content</a>
&nbsp;
<a
href="#"
onclick="if ('parentIFrame' in window) window.parentIFrame.size(250);return false;"
>Size(250)</a
>
&nbsp;
<a
href="#"
onclick="if ('parentIFrame' in window) window.parentIFrame.autoResize(true);return false;"
>autoResize(true)</a
>
<a
href="#"
onclick="if ('parentIFrame' in window) window.parentIFrame.autoResize(false);return false;"
>autoResize(false)</a
>
<a id="nested" href="frame.nested.html">Nested</a>
&nbsp;
<a href="frame.hover.html">:Hover</a>
&nbsp;
<a href="frame.textarea.html">TextArea</a>
&nbsp;
<a href="frame.absolute.html">Absolute Position</a>
&nbsp;
<a
href="#"
onclick="if ('parentIFrame' in window) window.parentIFrame.sendMessage('Hello from the iFrame');return false;"
>Send Message</a
>
&nbsp;
<a
href="#"
onclick="if ('parentIFrame' in window) window.parentIFrame.close();return false;"
>Close</a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete account
of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness. No one rejects,
dislikes, or avoids pleasure itself, because it is pleasure, but because
those who do not know how to pursue pleasure rationally encounter
consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain,
but because occasionally circumstances occur in which toil and pain can
procure him some great pleasure. To take a trivial example, which of us
ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to find fault with a man who
chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men
who are so beguiled and demoralized by the charms of pleasure of the
moment, so blinded by desire, that they cannot foresee the pain and
trouble that are bound to ensue; and equal blame belongs to those who fail
in their duty through weakness of will, which is the same as saying
through shrinking from toil and pain. These cases are perfectly simple and
easy to distinguish. In a free hour, when our power of choice is
untrammelled and when nothing prevents our being able to do what we like
best, every pleasure is to be welcomed and every pain avoided. But in
certain circumstances and owing to the claims of duty or the obligations
of business it will frequently occur that pleasures have to be repudiated
and annoyances accepted. The wise man therefore always holds in these
matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<script>
var level = document.location.search.replace(/\?/, '') || 0
$('#nested').attr('href', 'frame.nested.html?' + ++level)
</script>
<script>
var iFrameResizer = {
onMessage: function(message) {
alert(message, parentIFrame.getId())
}
}
</script>
<script
type="text/javascript"
src="../js/iframeResizer.contentWindow.min.js"
defer
></script>
</body>
</html>

View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
a {
float: right;
margin-left: 10px;
}
</style>
</head>
<body>
<b>iFrame :Hover Example</b>
<a href="frame.content.html">Back to page 1</a>
<p>
Mouse over the code example below.
</p>
<xmp>
<!-- #code -->
</xmp>
<script>
var iFrameResizer = {
heightCalculationMethod: 'lowestElement'
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script
type="text/javascript"
src="../js/iframeResizer.contentWindow.min.js"
></script>
<div id="code">
<style>
xmp {
background-color: #eee;
padding: 20px;
display: block;
}
xmp:hover {
border: #c33 solid 40px;
}
</style>
<script>
;(function() {
$('xmp').hover(function() {
if ('parentIFrame' in window) {
// Fix race condition in FireFox with setTimeout
setTimeout(parentIFrame.size.bind(parentIFrame), 0)
}
})
})()
</script>
</div>
<script>
$('xmp').text('<xmp>' + $('#code').html() + '<xmp>')
</script>
</body>
</html>

View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
*,
*:before,
*:after {
box-model: border-box;
}
a {
float: right;
margin-left: 10px;
}
h2 {
margin-top: 0;
}
body {
margin: 8px !important;
}
</style>
</head>
<body>
<a href="frame.content.html">Back to page 1</a>
<h2>Nested iFrame</h2>
<p>
Resize window or click one of the links in the nested iFrame to watch it
resize.
</p>
<div style="margin:20px;">
<iframe
id="nestedIFrame"
src="frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
<p id="callback"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/iframeResizer.min.js"></script>
<script type="text/javascript">
var level = document.location.search.replace(/\?/, '') || 0
$('iframe')
.attr('id', 'nestedIFrame' + level)
.attr('src', 'frame.content.html?' + level)
/*
* If you do not understand what the code below does, then please just use the
* following call in your own code.
*
* iFrameResize({log:true});
*
* Once you have it working, set the log option to false.
*/
iFrameResize({
log: true, // Enable console logging
inPageLinks: true,
onResized: function(messageData) {
// Callback fn when message is received
$('p#callback').html(
'<b>Frame ID:</b> ' +
messageData.iframe.id +
' <b>Height:</b> ' +
messageData.height +
' <b>Width:</b> ' +
messageData.width +
' <b>Event type:</b> ' +
messageData.type
)
},
onMessage: function(messageData) {
// Callback fn when message is received
parentIFrame.sendMessage(
messageData.message + ' (via ' + $('iframe').attr('id') + ')'
)
},
onClosed: function(id) {
/// Callback fn when iFrame is closed
$('p#callback').html(
'<b>IFrame (</b>' + id + '<b>) removed from page.</b>'
)
}
})
</script>
<script
type="text/javascript"
src="../js/iframeResizer.contentWindow.min.js"
></script>
</body>
</html>

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
a {
float: right;
margin-left: 10px;
}
</style>
</head>
<body>
<b>iFrame TextArea Example</b>
<a href="frame.content.html">Back to page 1</a>
<p>
Resize the textarea below.
</p>
<textarea id="textArea">Resize me</textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/iframeResizer.contentWindow.min.js"></script>
<script>
function store() {
this.x = this.offsetWidth
this.y = this.offsetHeight
}
$('textarea')
.each(store)
.on('mouseover mouseout', function() {
if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
if ('parentIFrame' in window) parentIFrame.size()
store.call(this)
}
})
</script>
</body>
</html>

View File

@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<style>
a.back {
float: right;
margin-left: 8px;
}
body {
border: solid 1px red;
}
p {
padding: 5px 212px 5px 5px;
margin: 0 0 5px;
}
#abs {
position: absolute;
top: 0;
bottom: -10;
pxright: 0;
width: 200px;
height: 101%;
background-color: wheat;
}
a.top {
position: absolute;
bottom: -10px;
right: 0;
margin: 5px;
}
</style>
</head>
<body>
<p>
<b>iFrame</b>
<a href="frame.content.html" class="back">Back to page 1</a>
&nbsp;
<a
href="#"
class="back"
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,99999999);return false;"
>Bottom</a
>
</p>
<p>
This page has an absolute position element that take it out side the normal
document body, which is marked with a red border on this page. This
prevents the normal height calculation, which is based on the body tag
from returning the correct height. To work around this you can set the
<b>heightCalculationMethod</b> option to use one of the other page height
properties.
</p>
<p>
Use the dropdown to change the sizing method of the page, select the
different sizing options to see how the effect the page. Note that they
can have different effects in different browsers, so you are normally best
off selecting <b>max</b> if you need to change away from the default
<b>bodyOffset</b> option.
</p>
<p>
<b>Height Calculation Method</b>
<select name="heightCalculationMethod">
<option>bodyOffset</option>
<option>bodyScroll</option>
<option>documentElementOffset</option>
<option>documentElementScroll</option>
<option>max</option>
<option>min</option>
<option>grow</option>
<option>lowestElement</option>
</select>
</p>
<p>
<i
>This option should be used sparingly, as the alternate methods can be
less accurate at working out the correct page size, can cause screen
flicker and can sometimes fail to reduce in size when the frame content
changes in browsers that do not support mutationObservers (See
<a href="https://caniuse.com/mutationobserver">caniuse.com</a> for
details).</i
>
</p>
<div id="abs">
Absolute positioned element
<a
href="#"
class="top"
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,0);return false;"
>Top</a
>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script
type="text/javascript"
src="../js/iframeResizer.contentWindow.min.js"
></script>
<script>
$('select').on('change', function() {
if ('parentIFrame' in window) {
parentIFrame.setHeightCalculationMethod($(this).val())
parentIFrame.size()
}
})
</script>
</body>
</html>

View File

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<h2>Automagically resizing iFrame</h2>
<p>
Resize window or click one of the links in the iFrame to watch it resize.
Or try with <a name="anchorParentTest" href="two.html">two iFrames</a>.
</p>
<div style="margin:20px;">
<iframe src="frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<p id="callback"></p>
<div style="margin: 8px 0;font-size:13px;">
For details on how this works, see
<a href="https://davidjbradshaw.github.io/iframe-resizer/"
>https://davidjbradshaw.github.io/iframe-resizer/</a
>.
</div>
<!-- MDN PolyFils for IE8 (This is not normally needed if you use the jQuery version) -->
<!--[if lte IE 8]>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/iframeResizer.min.js"></script>
<script type="text/javascript">
/*
* If you do not understand what the code below does, then please just use the
* following call in your own code.
*
* iFrameResize({log:true});
*
* Once you have it working, set the log option to false.
*/
var callbackDisplay = 'p#callback'
iFrameResize({
log: true, // Enable console logging
inPageLinks: true,
onResized: function (messageData) {
// Callback fn when resize is received
$(callbackDisplay).html(
'<b>Frame ID:</b> ' +
messageData.iframe.id +
' <b>Height:</b> ' +
messageData.height +
' <b>Width:</b> ' +
messageData.width +
' <b>Event type:</b> ' +
messageData.type
)
},
onMouseEnter: function (messageData) {
// Callback fn when mouse enters iframe
$(callbackDisplay).html(
'<b>Frame ID:</b> ' +
messageData.iframe.id +
' <b>ScreenX:</b> ' +
messageData.screenX +
' <b>ScreenY:</b> ' +
messageData.screenY +
' <b>Event type:</b> ' +
messageData.type
)
},
onMouseLeave: function (messageData) {
// Callback fn when mouse enters iframe
$(callbackDisplay).html(
'<b>Frame ID:</b> ' +
messageData.iframe.id +
' <b>ScreenX:</b> ' +
messageData.screenX +
' <b>ScreenY:</b> ' +
messageData.screenY +
' <b>Event type:</b> ' +
messageData.type
)
},
onMessage: function (messageData) {
// Callback fn when message is received
$(callbackDisplay).html(
'<b>Frame ID:</b> ' +
messageData.iframe.id +
' <b>Message:</b> ' +
messageData.message
)
alert(messageData.message)
document
.getElementsByTagName('iframe')[0]
.iFrameResizer.sendMessage('Hello back from parent page')
},
onClosed: function (id) {
// Callback fn when iFrame is closed
$(callbackDisplay).html('<b>IFrame (</b>' + id + '<b>) removed from page.</b>')
},
})
</script>
</body>
</html>

View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<h2>Automagically resizing iFrame</h2>
<p>
Resize window or click one of the links in the iFrame to watch it resize.
Or go back to a
<a name="anchorParentTest" href="index.html">single iFrame</a>.
</p>
<div style="margin:20px;">
<iframe
src="frame.content.html"
width="48%"
scrolling="no"
style="float:left;margin-right:2%"
></iframe>
<iframe src="frame.content.html" width="48%" scrolling="no"></iframe>
</div>
<p id="callback"></p>
<div style="margin: 8px 0;font-size:13px;">
For details on how this works, see
<a href="https://davidjbradshaw.github.io/iframe-resizer/"
>https://davidjbradshaw.github.io/iframe-resizer/</a
>.
</div>
<!-- MDN PolyFils for IE8 -->
<!--[if lte IE 8]>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../src/iframeResizer.js"></script>
<script type="text/javascript">
/*
* If you do not understand what the code below does, then please just use the
* following call in your own code.
*
* iFrameResize({log:true});
*
* Once you have it working, set the log option to false.
*/
iFrameResize({
log: true, // Enable console logging
enablePublicMethods: true, // Enable methods within iframe hosted page
enableInPageLinks: true,
onResized: function(messageData) {
// Callback fn when resize is received
$('p#callback').html(
'<b>Frame ID:</b> ' +
messageData.iframe.id +
' <b>Height:</b> ' +
messageData.height +
' <b>Width:</b> ' +
messageData.width +
' <b>Event type:</b> ' +
messageData.type
)
},
onMessage: function(messageData) {
// Callback fn when message is received
$('p#callback').html(
'<b>Frame ID:</b> ' +
messageData.iframe.id +
' <b>Message:</b> ' +
messageData.message
)
alert(messageData.message + ' (' + messageData.iframe.id + ')')
},
onClosed: function(id) {
// Callback fn when iFrame is closed
$('p#callback').html(
'<b>IFrame (</b>' + id + '<b>) removed from page.</b>'
)
}
})
</script>
</body>
</html>

View File

@ -0,0 +1,218 @@
module.exports = function (grunt) {
// show elapsed time at the end
require('time-grunt')(grunt) // eslint-disable-line import/no-extraneous-dependencies
// load all grunt tasks
// require('load-grunt-tasks')(grunt);
// eslint-disable-next-line import/no-extraneous-dependencies
require('jit-grunt')(grunt, {
'bump-only': 'grunt-bump',
'bump-commit': 'grunt-bump',
coveralls: 'grunt-karma-coveralls'
})
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
meta: {
bannerLocal:
'/*! iFrame Resizer (iframeSizer.min.js ) - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
' * Desc: Force cross domain iframes to size to content.\n' +
' * Requires: iframeResizer.contentWindow.min.js to be loaded into the target frame.\n' +
' * Copyright: (c) <%= grunt.template.today("yyyy") %> David J. Bradshaw - dave@bradshaw.net\n' +
' * License: MIT\n */\n',
bannerRemote:
'/*! iFrame Resizer (iframeSizer.contentWindow.min.js) - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
' * Desc: Include this file in any page being loaded into an iframe\n' +
' * to force the iframe to resize to the content size.\n' +
' * Requires: iframeResizer.min.js on host page.\n' +
' * Copyright: (c) <%= grunt.template.today("yyyy") %> David J. Bradshaw - dave@bradshaw.net\n' +
' * License: MIT\n */\n'
},
clean: ['coverage', 'coverageLcov'],
qunit: {
files: ['test/*.html'],
puppeteer: {
args: [
'--disable-web-security',
'--allow-file-access-from-files',
'--user-data-dir=/tmp'
]
}
},
karma: {
options: {
configFile: 'karma.conf.js'
},
travis: {
singleRun: true,
browsers: ['Chrome'], // 'PhantomJS'
coverageReporter: {
type: 'lcov',
dir: 'coverageLcov/'
}
},
single: {
singleRun: true,
browsers: ['Chrome', 'Firefox'] // 'Safari', 'PhantomJS'
},
watch: {
singleRun: false,
browsers: ['Chrome'], // 'Firefox', 'Safari', 'PhantomJS'
reporters: ['logcapture', 'progress']
}
},
coveralls: {
options: {
debug: true,
coverageDir: 'coverageLcov',
dryRun: false,
force: true,
recursive: true
}
},
uglify: {
options: {
sourceMap: true,
sourceMapIncludeSources: true,
report: 'gzip'
},
local: {
options: {
banner: '<%= meta.bannerLocal %>',
sourceMapName: 'js/iframeResizer.map'
},
src: ['js/iframeResizer.js'],
dest: 'js/iframeResizer.min.js'
},
remote: {
options: {
banner: '<%= meta.bannerRemote %>',
sourceMapName: 'js/iframeResizer.contentWindow.map'
},
src: ['js/iframeResizer.contentWindow.js'],
dest: 'js/iframeResizer.contentWindow.min.js'
}
},
watch: {
files: ['src/**/*'],
tasks: 'default'
},
bump: {
options: {
files: ['package.json', 'package-lock.json', 'bower.json'],
updateConfigs: ['pkg'],
commit: true,
commitMessage: 'Release v%VERSION%',
commitFiles: ['-a'], // '-a' for all files
createTag: true,
tagName: 'v%VERSION%',
tagMessage: 'Version %VERSION%',
push: true,
pushTo: 'origin',
gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' // options to use with '$ git describe'
}
},
shell: {
options: {
stdout: true,
stderr: true,
failOnError: true
},
npm: {
command: 'npm publish'
},
deployExample: {
command: function () {
var retStr = '',
fs = require('fs')
if (fs.existsSync('bin')) {
retStr = 'bin/deploy.sh'
}
return retStr
}
}
},
jsonlint: {
json: {
src: ['*.json']
}
},
removeBlock: {
options: ['TEST CODE START', 'TEST CODE END'],
files: [
{
src: 'src/iframeResizer.contentWindow.js',
dest: 'js/iframeResizer.contentWindow.js'
}
]
},
copy: {
main: {
nonull: true,
src: 'src/iframeResizer.js',
dest: 'js/iframeResizer.js'
}
},
eslint: {
target: ['src/**', '*.js']
}
})
grunt.registerTask('default', ['notest', 'karma:single'])
grunt.registerTask('build', ['removeBlock', 'copy', 'uglify'])
grunt.registerTask('notest', ['eslint', 'jsonlint', 'build'])
grunt.registerTask('test', ['clean', 'eslint', 'karma:single', 'qunit'])
grunt.registerTask('test-watch', ['clean', 'karma:watch'])
grunt.registerTask('travis', [
'clean',
'notest',
'qunit',
'karma:travis',
'coveralls'
])
grunt.registerTask('postBump', ['build', 'bump-commit', 'shell'])
grunt.registerTask('preBump', ['clean', 'notest'])
grunt.registerTask('patch', ['preBump', 'bump-only:patch', 'postBump'])
grunt.registerTask('minor', ['preBump', 'bump-only:minor', 'postBump'])
grunt.registerTask('major', ['preBump', 'bump-only:major', 'postBump'])
grunt.registerMultiTask('removeBlock', function () {
// set up a removal regular expression
// eslint-disable-next-line security/detect-non-literal-regexp
var removalRegEx = new RegExp(
'(// ' +
this.options()[0] +
' //)(?:[^])*?(// ' +
this.options()[1] +
' //)',
'g'
)
this.data.forEach(function (fileObj) {
var sourceFile = grunt.file.read(fileObj.src)
var removedFile = sourceFile.replace(removalRegEx, '')
grunt.file.write(fileObj.dest, removedFile)
}) // for each loop end
})
}

1
iframe-resizer-master/index.js Executable file
View File

@ -0,0 +1 @@
module.exports = require('./js')

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,5 @@
var iframeResize = require('./iframeResizer')
exports.iframeResize = iframeResize
exports.iframeResizer = iframeResize // Backwards compatibility
exports.iframeResizerContentWindow = require('./iframeResizer.contentWindow')

View File

@ -0,0 +1,80 @@
// Karma configuration
// Generated on Tue Aug 25 2015 12:11:48 GMT+0100 (BST)
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine-jquery', 'jasmine', 'requirejs'],
// Karma will require() these plugins
/*
plugins: [
'logcapture',
'karma-verbose-summary-reporter',
'karma-jasmine',
'karma-chrome-launcher'
],
*/
// list of files / patterns to load in the browser
files: [
'test-main.js',
'spec/lib/*.js',
'js/ie8.polyfils.min.js',
{ pattern: 'js/*.js', included: false },
{ pattern: 'src/*.js', included: false },
{ pattern: 'example/*.html', included: false },
{ pattern: 'spec/*Spec.js', included: false },
{ pattern: 'spec/resources/*', included: false },
{ pattern: 'spec/javascripts/fixtures/*.html', included: false }
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/*.js': ['coverage']
},
coverageReporter: {
type: 'html',
dir: 'coverage/'
},
client: {
captureConsole: true
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['logcapture', 'progress', 'verbose-summary', 'coverage'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'], // 'Chrome', 'Firefox', 'Safari', 'PhantomJS'
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
})
}

24668
iframe-resizer-master/package-lock.json generated Executable file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,132 @@
{
"name": "iframe-resizer",
"version": "4.3.2",
"homepage": "https://github.com/davidjbradshaw/iframe-resizer",
"authors": [
"David J. Bradshaw <dave@bradshaw.net>"
],
"maintainers": [
{
"name": "David J. Bradshaw",
"email": "dave@bradshaw.net"
}
],
"scripts": {
"build": "npm install && grunt",
"eslint": "eslint *.js src/* --color",
"eslint:fix": "npm run eslint -- --fix",
"test-watch": "grunt test-watch",
"test": "grunt travis"
},
"description": "Keep same and cross domain iFrames sized to their content with support for window/content resizing, and multiple iFrames.",
"repository": {
"type": "git",
"url": "https://github.com/davidjbradshaw/iframe-resizer.git"
},
"github": "https://github.com/davidjbradshaw/iframe-resizer",
"funding": {
"type": "individual",
"url": "https://github.com/davidjbradshaw/iframe-resizer/blob/master/FUNDING.md"
},
"devDependencies": {
"cosmiconfig": "^7.0.0",
"cryptiles": "^4.1.3",
"deep-extend": "^0.6.0",
"eslint": "^7.25.0",
"eslint-config-adjunct": "^4.11.1",
"eslint-config-airbnb-babel": "^0.2.1",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-auto": "^0.7.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-array-func": "^3.1.7",
"eslint-plugin-compat": "^3.9.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-html": "^6.1.2",
"eslint-plugin-ie11": "^1.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jasmine": "^4.1.2",
"eslint-plugin-json": "^2.1.2",
"eslint-plugin-json-format": "^2.0.1",
"eslint-plugin-lodash": "^7.2.0",
"eslint-plugin-lodash-fp": "^2.2.0-a1",
"eslint-plugin-markdown": "^2.1.0",
"eslint-plugin-no-constructor-bind": "^2.0.4",
"eslint-plugin-no-secrets": "^0.8.9",
"eslint-plugin-no-unsanitized": "^3.1.5",
"eslint-plugin-no-use-extend-native": "^0.5.0",
"eslint-plugin-only-error": "^1.0.2",
"eslint-plugin-optimize-regex": "^1.2.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-qunit": "^6.1.0",
"eslint-plugin-scanjs-rules": "^0.2.1",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-sonarjs": "^0.7.0",
"eslint-plugin-switch-case": "^1.1.2",
"eslint-plugin-unicorn": "^31.0.0",
"grunt": "^1.4.0",
"grunt-bump": "^0.8.0",
"grunt-cli": "^1.4.2",
"grunt-contrib-clean": "^2.0.0",
"grunt-contrib-compress": "~2.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-jshint": "~3.0.0",
"grunt-contrib-qunit": "^2.0.0",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "~1.1.0",
"grunt-eslint": "^23.0.0",
"grunt-jsonlint": "~2.1.3",
"grunt-karma": "^4.0.0",
"grunt-karma-coveralls": "^2.5.4",
"grunt-shell": "~3.0.1",
"hoek": "^6.1.3",
"jasmine": "^3.7.0",
"jasmine-core": "^3.7.1",
"jasmine-jquery": "^2.1.1",
"jit-grunt": "~0.10.0",
"jquery": "^3.6.0",
"karma": "^6.3.2",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.3",
"karma-firefox-launcher": "^2.1.0",
"karma-jasmine": "^4.0.1",
"karma-jasmine-jquery": "^0.1.1",
"karma-logcapture-reporter": "0.0.1",
"karma-phantomjs-launcher": "^1.0.4",
"karma-requirejs": "^1.1.0",
"karma-safari-launcher": "^1.0.0",
"karma-verbose-summary-reporter": "0.0.1",
"load-grunt-tasks": "~5.1.0",
"lodash": "^4.17.21",
"minimatch": "^3.0.4",
"phantomjs": "^2.1.7",
"prettier": "^2.2.1",
"requirejs": "^2.3.6",
"time-grunt": "^2.0.0"
},
"main": "index.js",
"engines": {
"node": ">=0.8.0"
},
"license": "MIT",
"keywords": [
"CrossDomain",
"Cross-Domain",
"iFrame",
"Resizing",
"Resizer",
"postMessage",
"autoheight",
"auto-height",
"iframe-auto-height",
"height-iframe",
"heightiframe",
"width",
"mutationObserver",
"RWD",
"responsiveiframes",
"responsive-iframes",
"jquery-plugin"
]
}

View File

@ -0,0 +1,61 @@
define(['iframeResizer'], function(iFrameResize) {
describe('iFrame init', function() {
var iframe
var id = 'initTest'
beforeEach(function(done) {
loadIFrame('iframe600.html')
iframe = iFrameResize({
log: LOG,
id: id + '-',
autoResize: false,
bodyMargin: 1,
checkOrigin: false,
inPageLinks: true,
interval: 0,
maxHeight: 100,
minHeight: 10,
maxWidth: 100,
minWidth: 10,
scrolling: true,
sizeHeight: false,
sizeWidth: true,
tolerance: 1,
onInit: function() {
setTimeout(done, 1)
}
})[0]
})
afterEach(function() {
//tearDown(iframe);
})
it('should add an ID', function() {
expect(iframe.id.split('-')[0]).toBe(id)
})
describe('methods', function() {
it('should create iFrameResizer object', function() {
expect(iframe.iFrameResizer).toBeDefined()
})
it('should create a close method', function() {
expect(iframe.iFrameResizer.close).toBeDefined()
})
it('should create a resize method', function() {
expect(iframe.iFrameResizer.resize).toBeDefined()
})
it('should create a moveToAnchor method', function() {
expect(iframe.iFrameResizer.moveToAnchor).toBeDefined()
})
it('should create a sendMessage method', function() {
expect(iframe.iFrameResizer.sendMessage).toBeDefined()
})
})
})
})

View File

@ -0,0 +1,62 @@
define(['iframeResizer'], function(iFrameResize) {
describe('jump to anchor', function() {
var iframe
var log = LOG
var testId = 'anchor'
beforeEach(function() {
loadIFrame('iframe600.html')
})
afterEach(function() {
tearDown(iframe)
})
it('requested from host page', function(done) {
var iframe1 = iFrameResize({
log: log,
id: 'anchor1'
})[0]
spyOnIFramePostMessage(iframe1)
setTimeout(function() {
iframe1.iFrameResizer.moveToAnchor('testAnchor')
expect(iframe1.contentWindow.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]moveToAnchor:testAnchor',
getTarget(iframe1)
)
tearDown(iframe1)
done()
}, 100)
})
it('mock incoming message', function(done) {
iframe2 = iFrameResize({
log: log,
id: 'anchor2',
onScroll: function(position) {
expect(position.x).toBe(8)
expect(position.y).toBeGreaterThan(8)
done()
}
})[0]
mockMsgFromIFrame(iframe2, 'inPageLink:#anchorParentTest')
})
it('mock incoming message to parent', function(done) {
iframe3 = iFrameResize({
log: log,
id: 'anchor3'
})[0]
window.parentIFrame = {
moveToAnchor: function() {
done()
}
}
mockMsgFromIFrame(iframe3, 'inPageLink:#anchorParentTest2')
})
})
})

View File

@ -0,0 +1,510 @@
define(['iframeResizerContent', 'jquery'], function(mockMsgListener, $) {
function createMsg(msg) {
return {
data: '[iFrameSizer]' + msg,
source: {
postMessage: function(msg) {
if (log) {
console.log('PostMessage: ' + msg)
}
}
}
}
}
window.iFrameResizer = {
onMessage: function(msg) {
msgCalled = msg
},
onReady: function() {
this.readyCalled = true
},
targetOrigin: '*'
}
$(window.document.body).append('<a href="#foo" id="bar"></a>')
//test early message is ignored
mockMsgListener(createMsg('resize'))
var id = 'parentIFrameTests',
log = true,
childMsg =
'8:true:' +
log +
':9999:true:false:-8px:max:wheat:null:0:true:child:scroll'
;(msgObject = createMsg(id + ':' + childMsg)),
(win = mockMsgListener(msgObject))
//test reset is ignored during init
mockMsgListener(createMsg('reset'))
window.msgCalled = null
//window.readyCalled = null;
beforeEach(function() {
spyOn(msgObject.source, 'postMessage')
spyOn(window.iFrameResizer, 'onMessage')
spyOn(window.iFrameResizer, 'onReady')
spyOn(console, 'log')
spyOn(console, 'warn')
})
afterAll(function() {
win.parentIFrame.close()
})
describe('ParentIFrame methods: ', function() {
it('autoResize', function() {
win.parentIFrame.autoResize(true)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Animation Start'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Animation Iteration'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Animation End'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Orientation Change'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Input'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Print'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Transition End'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Mouse Up'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: Mouse Down'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Add event listener: IFrame Resized'
)
win.parentIFrame.autoResize(false)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Animation Start'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Animation Iteration'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Animation End'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Orientation Change'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Input'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Print'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Transition End'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Mouse Up'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: Mouse Down'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Remove event listener: IFrame Resized'
)
})
it('Get ID of iFrame is same as iFrame', function() {
expect(win.parentIFrame.getId()).toBe(id)
})
it('move to anchor', function() {
win.parentIFrame.moveToAnchor('foo')
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:0:0:inPageLink:#foo',
'*'
)
win.parentIFrame.moveToAnchor('bar')
expect(msgObject.source.postMessage.calls.argsFor(1)[0]).toContain(
':scrollToOffset'
)
})
it('reset', function() {
win.parentIFrame.reset()
expect(msgObject.source.postMessage.calls.argsFor(0)[0]).toContain(
':reset'
)
})
it('getPageInfo', function(done) {
win.parentIFrame.getPageInfo(function(pageInfo) {
expect(pageInfo.iframeHeight).toBe(500)
expect(pageInfo.iframeWidth).toBe(300)
expect(pageInfo.offsetLeft).toBe(20)
expect(pageInfo.offsetTop).toBe(85)
expect(pageInfo.scrollTop).toBe(0)
expect(pageInfo.scrollLeft).toBe(0)
expect(pageInfo.documentHeight).toBe(645)
expect(pageInfo.documentWidth).toBe(1295)
expect(pageInfo.windowHeight).toBe(645)
expect(pageInfo.windowWidth).toBe(1295)
expect(pageInfo.clientHeight).toBe(645)
expect(pageInfo.clientWidth).toBe(1295)
done()
})
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:0:0:pageInfo',
'*'
)
mockMsgListener(
createMsg(
'pageInfo:{"iframeHeight":500,"iframeWidth":300,"clientHeight":645,' +
'"clientWidth":1295,"offsetLeft":20,"offsetTop":85,"scrollLeft":0,' +
'"scrollTop":0,"documentHeight":645,"documentWidth":1295,' +
'"windowHeight":645,"windowWidth":1295}'
)
)
})
it('getPageInfoStop', function() {
win.parentIFrame.getPageInfo()
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:0:0:pageInfoStop',
'*'
)
})
it('scrollTo', function() {
win.parentIFrame.scrollTo(10, 10)
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:10:10:scrollTo',
'*'
)
})
it('scrollToOffset', function() {
win.parentIFrame.scrollToOffset(10, 10)
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:10:10:scrollToOffset',
'*'
)
})
it('sendMessage (string)', function() {
win.parentIFrame.sendMessage('foo:bar')
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:0:0:message:"foo:bar"',
'*'
)
})
it('sendMessage (object)', function() {
win.parentIFrame.sendMessage({ foo: 'bar' }, 'https://foo.bar:1337')
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:0:0:message:{"foo":"bar"}',
'https://foo.bar:1337'
)
})
xit('setTargetOrigin', function() {
var targetOrigin = 'https://foo.bar:1337'
win.parentIFrame.setTargetOrigin(targetOrigin)
win.parentIFrame.size(10, 10)
win.parentIFrame.setTargetOrigin('*')
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:10:10:size',
targetOrigin
)
})
})
describe('inbound message: ', function() {
it('readyCallack', function() {
expect(window.readyCalled).toEqual(true)
})
it('message (String)', function() {
var msg = 'foo'
mockMsgListener(createMsg('message:' + JSON.stringify(msg)))
expect(msgCalled).toBe(msg)
})
it('message (Object)', function() {
var msg = { foo: 'bar' }
mockMsgListener(createMsg('message:' + JSON.stringify(msg)))
expect(msgCalled.foo).toBe('bar')
})
xit('reset', function(done) {
// timing issue in Chrome
setTimeout(function() {
//Wait for init lock to clear
mockMsgListener(createMsg('reset'))
console.log('>> ', msgObject.source.postMessage.calls.argsFor(0))
expect(msgObject.source.postMessage.calls.argsFor(0)[0]).toContain(
':reset'
)
done()
}, 200)
})
it('resize(max)', function() {
win.parentIFrame.setHeightCalculationMethod('max')
mockMsgListener(createMsg('resize'))
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Trigger event: Parent window requested size check'
)
})
it('resize(lowestElement)', function() {
win.parentIFrame.setHeightCalculationMethod('lowestElement')
mockMsgListener(createMsg('resize'))
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Trigger event: Parent window requested size check'
)
})
it('resize(rightMostElement)', function() {
win.parentIFrame.setWidthCalculationMethod('rightMostElement')
mockMsgListener(createMsg('resize'))
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Trigger event: Parent window requested size check'
)
})
it('move to anchor', function() {
mockMsgListener(createMsg('moveToAnchor:foo'))
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:0:0:inPageLink:#foo',
'*'
)
})
xit('unexpected message', function() {
mockMsgListener(createMsg('foo'))
expect(console.warn).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] Unexpected message ([iFrameSizer]foo)'
)
})
})
describe('performance: ', function() {
it('trottles', function(done) {
win.parentIFrame.size(10, 10)
win.parentIFrame.size(20, 10)
win.parentIFrame.size(30, 10)
win.parentIFrame.size(40, 10)
win.parentIFrame.size(50, 10)
win.parentIFrame.size(60, 10)
setTimeout(function() {
// expect(msgObject.source.postMessage).toHaveBeenCalledWith('[iFrameSizer]parentIFrameTests:10:10:size', '*');
expect(msgObject.source.postMessage).not.toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:20:10:size',
'*'
)
expect(msgObject.source.postMessage).not.toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:30:10:size',
'*'
)
expect(msgObject.source.postMessage).not.toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:40:10:size',
'*'
)
expect(msgObject.source.postMessage).not.toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:50:10:size',
'*'
)
expect(msgObject.source.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentIFrameTests:60:10:size',
'*'
)
done()
}, 17)
})
})
describe('height calculation methods: ', function() {
it('invalid', function() {
win.parentIFrame.setHeightCalculationMethod('foo')
expect(console.warn).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] foo is not a valid option for heightCalculationMethod.'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] height calculation method set to "bodyOffset"'
)
win.parentIFrame.size()
})
it('bodyOffset', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('bodyOffset')
win.parentIFrame.size()
done()
}, 10)
})
it('offset', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('offset')
win.parentIFrame.size()
done()
}, 20)
})
it('bodyScroll', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('bodyScroll')
win.parentIFrame.size()
done()
}, 30)
})
it('documentElementOffset', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('documentElementOffset')
win.parentIFrame.size()
done()
}, 40)
})
it('documentElementScroll', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('documentElementScroll')
win.parentIFrame.size()
done()
}, 50)
})
it('max', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('max')
win.parentIFrame.size()
done()
}, 60)
})
it('min', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('min')
win.parentIFrame.size()
done()
}, 70)
})
it('grow', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('grow')
win.parentIFrame.size()
done()
}, 80)
})
it('lowestElement', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('lowestElement')
win.parentIFrame.size()
done()
}, 90)
})
it('taggedElement', function(done) {
setTimeout(function() {
win.parentIFrame.setHeightCalculationMethod('taggedElement')
win.parentIFrame.size()
done()
}, 100)
})
})
describe('width calculation methods: ', function() {
it('invalid', function() {
win.parentIFrame.setWidthCalculationMethod('foo')
expect(console.warn).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] foo is not a valid option for widthCalculationMethod.'
)
expect(console.log).toHaveBeenCalledWith(
'[iFrameSizer][parentIFrameTests] width calculation method set to "scroll"'
)
win.parentIFrame.size()
})
it('bodyOffset', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('bodyOffset')
win.parentIFrame.size()
done()
}, 110)
})
it('bodyScroll', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('bodyScroll')
win.parentIFrame.size()
done()
}, 120)
})
it('documentElementOffset', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('documentElementOffset')
win.parentIFrame.size()
done()
}, 130)
})
it('documentElementScroll:', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('documentElementScroll:')
win.parentIFrame.size()
done()
}, 140)
})
it('scroll', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('scroll')
win.parentIFrame.size()
done()
}, 150)
})
it('max', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('max')
win.parentIFrame.size()
done()
}, 160)
})
it('min', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('min')
win.parentIFrame.size()
done()
}, 170)
})
it('leftMostElement', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('leftMostElement')
win.parentIFrame.size()
done()
}, 180)
})
it('taggedElement', function(done) {
setTimeout(function() {
win.parentIFrame.setWidthCalculationMethod('taggedElement')
win.parentIFrame.size()
done()
}, 190)
})
})
})

View File

@ -0,0 +1,40 @@
define(['iframeResizer'], function(iFrameResize) {
describe('Close iFrame', function() {
var iframe
beforeEach(function() {
loadIFrame('iframe600.html')
})
it('closes from parent', function(done) {
var evtCounter = 0
iframe = iFrameResize({
log: LOG,
id: 'close1',
onClosed: function() {
setTimeout(done, 0)
}
})[0]
setTimeout(iframe.iFrameResizer.close, 1)
})
it('closes from iframe', function(done) {
var evtCounter = 0
iframe = iFrameResize({
log: LOG,
id: 'close2',
onClosed: function() {
setTimeout(done, 0)
},
onInit: function(iframe) {
iframe.iFrameResizer.sendMessage('close')
}
})[0]
mockMsgFromIFrame(iframe, 'close')
})
})
})

View File

@ -0,0 +1,86 @@
define(['iframeResizer'], function(iFrameResize) {
describe('Get Page info', function() {
var log = LOG
var testId = 'anchor'
beforeEach(function() {
loadIFrame('iframe600.html')
})
it('requested from iFrame', function(done) {
var iframe1 = iFrameResize({
log: log,
id: 'getPageInfo'
})[0]
spyOn(iframe1.contentWindow, 'postMessage').and.callFake(function(msg) {
if (0 !== msg.indexOf('pageInfo')) {
expect(
msg.indexOf(
'"offsetTop":0,"offsetLeft":0,"scrollTop":0,"scrollLeft":0'
)
).not.toEqual(0)
}
if (0 !== msg.indexOf('pageInfoStop')) {
tearDown(iframe1)
done()
}
})
mockMsgFromIFrame(iframe1, 'pageInfo')
mockMsgFromIFrame(iframe1, 'pageInfoStop')
})
})
describe('Get Page info with multiple frames', function() {
var log = LOG
beforeEach(function() {
loadIFrame('twoIFrame600WithId.html')
})
xit('must send pageInfo to second frame', function(done) {
var iframes = iFrameResize({
log: log,
id: '#frame1,#frame2',
onInit: function(iframe) {
iframe.iFrameResizer.sendMessage('getPageInfo')
}
})
var iframe1 = iframes[0],
iframe2 = iframes[1]
setTimeout(function() {
var counter = 0,
frame1Called = false,
frame2Called = false
function checkCounter() {
if (counter === 2) {
expect(frame1Called && frame2Called).toBeTruthy()
tearDown(iframe1)
tearDown(iframe2)
done()
}
}
iframe1.contentWindow.postMessage = function(msg) {
if (0 < msg.indexOf('pageInfo')) {
frame1Called = true
counter++
checkCounter()
}
}
iframe2.contentWindow.postMessage = function(msg) {
if (0 < msg.indexOf('pageInfo')) {
frame2Called = true
counter++
checkCounter()
}
}
window.dispatchEvent(new Event('resize'))
}, 200)
})
})
})

View File

@ -0,0 +1,38 @@
/* jshint undef: false, unused: true */
'use strict'
define(['iframeResizer'], function(iFrameResize) {
describe('iFrame init(CSS Selector)', function() {
var iframe
beforeAll(function(done) {
loadIFrame('iframe600.html')
iframe = iFrameResize(
{
log: LOG,
minHeight: 99999,
onResized: done,
checkOrigin: [
'https://localhost',
'https://localhost',
location.href
.split('/')
.slice(0, 3)
.join('/')
]
},
'iframe'
)[0]
})
afterAll(function() {
tearDown(iframe)
})
it('should create iFrameResizer object', function() {
expect(iframe.iFrameResizer).toBeDefined()
})
})
})

View File

@ -0,0 +1,28 @@
/* jshint undef: false, unused: true */
'use strict'
define(['iframeResizer'], function(iFrameResize) {
describe('iFrame init(DOM Object)', function() {
var iframe
beforeAll(function() {
loadIFrame('iframe600.html')
iframe = iFrameResize(
{
log: LOG
},
document.getElementsByTagName('iframe')[0]
)[0]
})
afterAll(function() {
tearDown(iframe)
})
it('should create iFrameResizer object', function() {
expect(iframe.iFrameResizer).toBeDefined()
})
})
})

View File

@ -0,0 +1,31 @@
/* jshint undef: false, unused: true */
'use strict'
define(['iframeResizer'], function(iFrameResize) {
describe('iFrame init(Double)', function() {
var iframe
beforeAll(function() {
loadIFrame('iframe600WithId.html')
//spyOn(console,'warn');
})
afterAll(function() {
tearDown(iframe)
})
it('should create iFrameResizer object', function() {
window.parentIFrame = {
getId: function() {
return 'getIdTest'
}
}
iframe = iFrameResize({ log: LOG }, '#doubleTest')[0]
iFrameResize({ log: LOG }, '#doubleTest')
expect(iframe.iFrameResizer).toBeDefined()
expect(console.warn).toHaveBeenCalled()
delete window.parentIFrame
})
})
})

View File

@ -0,0 +1,65 @@
define(['iframeResizer'], function(iFrameResize) {
describe('Setup error', function() {
var iframe
var log = LOG
beforeEach(function() {
loadIFrame('iframe600.html')
})
it('min > max', function() {
expect(function() {
iFrameResize({
log: log,
id: 'error1',
maxHeight: 100,
minHeight: 999
})
}).toThrow(
new Error('Value for minHeight can not be greater than maxHeight')
)
})
it('Unexpected data type', function() {
expect(function() {
iFrameResize(
{
log: log,
id: 'error2'
},
1
)
}).toThrow(new TypeError('Unexpected data type (number)'))
})
it('Expected <IFRAME> tag', function() {
expect(function() {
iFrameResize(
{
log: log,
id: 'error3'
},
'div'
)
}).toThrow(new TypeError('Expected <IFRAME> tag, found <DIV>'))
})
it('Object is not a valid DOM element', function() {
expect(function() {
iFrameResize(
{
log: log,
id: 'error4'
},
{}
)
}).toThrow(new TypeError('Object is not a valid DOM element'))
})
it('Options is not an object', function() {
expect(function() {
iFrameResize('ERROR')
}).toThrow(new TypeError('Options is not an object'))
})
})
})

View File

@ -0,0 +1,25 @@
/* jshint undef: false, unused: true */
'use strict'
define(['iframeResizer', 'jquery'], function(iFrameResize, $) {
describe('iFrame init(jQuery)', function() {
var iframe
beforeAll(function() {
loadIFrame('iframe600.html')
var $iframes = $('iframe').iFrameResize()
iframe = $iframes.get(0)
})
afterAll(function() {
tearDown(iframe)
})
it('should create iFrameResizer object', function() {
expect(iframe.iFrameResizer).toBeDefined()
})
})
})

View File

@ -0,0 +1,26 @@
/* jshint undef: false, unused: true */
'use strict'
define(['iframeResizer'], function(iFrameResize) {
describe('iFrame init(DOM Object)', function() {
var iframe
beforeAll(function() {
loadIFrame('iframe600.html')
iframe = iFrameResize(
undefined,
document.getElementsByTagName('iframe')[0]
)[0]
})
afterAll(function() {
tearDown(iframe)
})
it('should create iFrameResizer object', function() {
expect(iframe.iFrameResizer).toBeDefined()
})
})
})

View File

@ -0,0 +1,3 @@
<iframe src="/base/spec/resources/blank.html" width="100%" scrolling="no"></iframe>

View File

@ -0,0 +1,6 @@
<div id="iframe-fixture" style="width:600px;">
<iframe src="/base/spec/resources/frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<a name="anchorParentTest"></a>

View File

@ -0,0 +1,7 @@
<div id="iframe-fixture" style="width:600px;">
<iframe id="doubleTest" src="/base/spec/resources/frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<a name="anchorParentTest"></a>

View File

@ -0,0 +1,8 @@
<div id="iframe-fixture" style="width:600px;">
<iframe id="frame1" src="/base/spec/resources/frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<div id="iframe-fixture" style="width:600px;">
<iframe id="frame2" src="/base/spec/resources/frame.content.html" width="100%" scrolling="no"></iframe>
</div>

View File

@ -0,0 +1,67 @@
'use strict';
var LOG = true;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 4000;
jasmine.getFixtures().fixturesPath = 'base/spec/javascripts/fixtures';
function tearDown(iframe) {
if (iframe) setTimeout(iframe.iFrameResizer.close, 1);
window.parentIFrame = undefined;
}
function loadIFrame(filename) {
loadFixtures(filename);
}
function getTarget(iframe) {
return iframe.src
.split('/')
.slice(0, 3)
.join('/');
}
function mockPostMsgViaHook(testIFrame, id, msg, callback) {
return testIFrame('[iFrameSizer]' + id + ':' + msg, callback);
}
function mockPostMsg(id, msg) {
var message = '[iFrameSizer]' + id + ':' + msg;
console.log('Mock postMessage: ', message);
window.postMessage(message, '*');
}
function mockMsgFromIFrame(iframe, msg) {
mockPostMsg(iframe.id, '0:0:' + msg);
}
function mockInitFromParent(testIFrame, id, log, callback) {
return mockPostMsgViaHook(
testIFrame,
id,
'8:false:' + log + ':0:true:false:null:max:wheat:null:0:true:child:scroll',
callback
);
}
function spyOnPostMessage(target) {
spyOn(target, 'postMessage');
}
function spyOnWindowPostMessage() {
spyOnPostMessage(window.parent);
return window.parent.postMessage;
}
function spyOnIFramePostMessage(iframe) {
spyOnPostMessage(iframe.contentWindow);
}
function closeChild(window, done) {
window.parentIFrame.close();
done();
}
function strEnd(str, num) {
return str.slice(-num);
}

View File

@ -0,0 +1,166 @@
define(['iframeResizer'], function (iFrameResize) {
describe('Parent Page', function () {
describe('default resize', function () {
var iframe
var log = LOG
var testId = 'defaultResize3'
var ready
beforeEach(function (done) {
loadIFrame('iframe600.html')
iframe = iFrameResize({
log: log,
id: testId,
onResized: function () {
ready = true
done()
}
})[0]
mockMsgFromIFrame(iframe, 'foo')
})
afterEach(function () {
tearDown(iframe)
})
it('receive message', function () {
expect(ready).toBe(true)
})
})
describe('reset Page', function () {
var iframe
var log = LOG
var testId = 'parentPage1'
beforeEach(function (done) {
loadIFrame('iframe600.html')
iframe = iFrameResize({
log: log,
id: testId
})[0]
spyOn(iframe.contentWindow, 'postMessage').and.callFake(done)
mockMsgFromIFrame(iframe, 'reset')
})
afterEach(function () {
tearDown(iframe)
})
it('receive message', function () {
expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]reset',
'https://localhost:9876'
)
})
})
describe('late load msg received', function () {
var iframe
var log = LOG
var testId = 'parentPage2'
beforeEach(function (done) {
loadIFrame('iframe600.html')
iframe = iFrameResize({
log: log,
id: testId
})[0]
spyOn(iframe.contentWindow, 'postMessage').and.callFake(done)
window.postMessage('[iFrameResizerChild]Ready', '*')
})
afterEach(function () {
tearDown(iframe)
})
it('receive message', function () {
expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]parentPage2:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll:true',
'https://localhost:9876'
)
})
})
describe('resize height', function () {
var iframe
var log = LOG
var testId = 'parentPage3'
var HEIGHT = 90
var extraHeights = [1, 2, 3, 4]
var setUp = (boxSizing, units) => {
loadIFrame('iframe.html')
iframe = iFrameResize({
log: log,
id: testId
})[0]
iframe.style.boxSizing = boxSizing
iframe.style.paddingTop = extraHeights[0] + units
iframe.style.paddingBottom = extraHeights[1] + units
iframe.style.borderTop = `${extraHeights[2]}${units} solid`
iframe.style.borderBottom = `${extraHeights[3]}${units} solid`
spyPostMsg = spyOn(iframe.contentWindow, 'postMessage')
// needs timeout so postMessage always comes after 'ready' postMessage
setTimeout(() => {
window.postMessage(
`[iFrameSizer]${testId}:${HEIGHT}:600:mutationObserver`,
'*'
)
}, 0)
}
afterEach(function () {
tearDown(iframe)
})
it('includes padding and borders from "px" units in height when CSS "box-sizing" is set to "border-box"', (done) => {
setUp('border-box', 'px')
// timeout needed because of requestAnimationFrame and must be more than window.postMessage in setUp
setTimeout(() => {
expect(iframe.offsetHeight).toBe(
HEIGHT + extraHeights.reduce((a, b) => a + b, 0)
)
done()
}, 100)
})
it('includes padding and borders from "rem" units in height when CSS "box-sizing" is set to "border-box"', (done) => {
const REM = 14
// changes the rem units of the doc so we can test accurately
document.querySelector('html').style.fontSize = `${REM}px`
setUp('border-box', 'rem')
// timeout needed because of requestAnimationFrame and must be more than window.postMessage in setUp
setTimeout(() => {
expect(iframe.offsetHeight).toBe(
HEIGHT + extraHeights.reduce((a, b) => a + b * REM, 0)
)
done()
}, 100)
})
it('includes padding and borders from "px" units in height when CSS "box-sizing" is set to "content-box"', (done) => {
setUp('content-box', 'px')
// timeout needed because of requestAnimationFrame and must be more than window.postMessage in setUp
setTimeout(() => {
expect(iframe.offsetHeight).toBe(
HEIGHT + extraHeights.reduce((a, b) => a + b, 0)
)
done()
}, 100)
})
})
})
})

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

View File

@ -0,0 +1,243 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<style>
a { float:right; }
</style>
</head>
<body>
<b>iFrame</b>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p name="testAnchor">
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<script type="text/javascript">
(function () {
var logging = true;
try {
function warn(msg) {
if (window.console) {
console.warn('[Test] ' + msg);
}
}
function init(test) {
function changeContent() {
$('p').eq(0).remove();
}
function callMethod(methodName, val1, val2) {
if ('parentIFrame' in window)
window.parentIFrame[methodName](val1, val2);
else
warn('window.parentIFrame methods not enabled.')
}
console.info(test);
switch (test) {
case 'changeContent':
setInterval(function () { changeContent(); }, 2);
break;
case 'close':
callMethod('close');
break;
case 'pageChange':
location.href = '/base/example/frame.hover.html';
break;
case 'nested':
location.href = 'frame.nested.html';
break;
case 'size':
changeContent();
callMethod('size');
break;
case 'autoResize':
callMethod('setAutoResize', true);
setTimeout(function () {
changeContent();
}, 500);
break;
case 'size100':
callMethod('size', 100);
break;
case 'size200300':
callMethod('size', 200, 300);
break;
case 'jsTrigger':
changeContent();
callMethod('trigger');
break;
case 'chkHeight':
callMethod('sendMessage', document.body.offsetHeight);
break;
case 'chkBackground':
callMethod('sendMessage', document.body.style.backgroundColor);
break;
case 'chkSendMsg':
callMethod('sendMessage', 'message: test string');
break;
case 'chkSendObj':
callMethod('sendMessage', { message: 'test object' });
break;
case 'chkGetId':
if ('parentIFrame' in window)
callMethod('sendMessage', window.parentIFrame.getId());
break;
case 'setHeightCalculationMethod':
if ('parentIFrame' in window) {
parentIFrame.setHeightCalculationMethod('max');
callMethod('size');
}
break;
case 'width':
$('p').width(3000);
break;
case 'image':
$('p').html('<img src="djb.jpg">');
break;
case 'getPageInfo':
callMethod('getPageInfo', function (pageInfo) {
});
}
}
window.iFrameResizer = {
onMessage: init
}
}
catch (e) {
warn(e);
}
})();
</script>
<script type="text/javascript" src="/base/js/iframeResizer.contentWindow.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
*,
*:before,
*:after {
box-model: border-box;
}
a {
float: right;
margin-left: 10px;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<h2>Late load JS test</h2>
<p>Load JS with require after load event has fired.</p>
<div style="margin:20px;">
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
setTimeout(function () {
console.log('Load Script');
$.getScript('../../js/iframeResizer.contentWindow.min.js');
}, 500);
});
</script>
</body>
</html>

View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
*, *:before, *:after {box-model: border-box;}
a { float:right; margin-left:10px;}
h2 {margin-top: 0;}
</style>
</head>
<body>
<h2>Nested iFrame</h2>
<p>Resize window or click one of the links in the nested iFrame to watch it resize.</p>
<div style="margin:20px;">
<iframe id="nestedIFrame" src="frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<p id="callback">
</p>
<script type="text/javascript" src="../../js/iframeResizer.contentWindow.min.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="../../js/iframeResizer.min.js"></script>
<script type="text/javascript" src="../../js/ie8.polyfils.min.js"></script>
<script type="text/javascript">
iFrameResize({
log: true, // Enable console logging
onResized: function (messageData) { // Callback fn when message is received
setTimeout(function () { parentIFrame.sendMessage('nested') }, 50);
}
});
</script>
</body>
</html>

View File

@ -0,0 +1,48 @@
define(['iframeResizer'], function(iFrameResize) {
describe('Scroll Page', function() {
var iframe
var log = LOG
beforeEach(function() {
loadIFrame('iframe600.html')
})
afterEach(function() {
tearDown(iframe)
})
it('mock incoming message', function(done) {
iframe = iFrameResize({
log: log,
id: 'scroll1'
})[0]
window.parentIFrame = {
scrollTo: function(x, y) {
expect(x).toBe(0)
expect(y).toBe(0)
done()
}
}
mockMsgFromIFrame(iframe, 'scrollTo')
})
it('mock incoming message', function(done) {
iframe = iFrameResize({
log: log,
id: 'scroll2'
})[0]
window.parentIFrame = {
scrollToOffset: function(x, y) {
expect(x).toBe(8)
expect(y).toBe(8)
done()
}
}
mockMsgFromIFrame(iframe, 'scrollToOffset')
})
})
})

View File

@ -0,0 +1,59 @@
define(['iframeResizer'], function(iFrameResize) {
describe('Send Message from Host Page', function() {
var iframe
var log = LOG
beforeEach(function() {
loadIFrame('iframe600.html')
})
afterEach(function() {
tearDown(iframe)
})
it('send message to iframe', function(done) {
var iframe1 = iFrameResize({
log: log,
id: 'sendMessage1'
})[0]
spyOnIFramePostMessage(iframe1)
setTimeout(function() {
iframe1.iFrameResizer.sendMessage('chkSendMsg:test')
expect(iframe1.contentWindow.postMessage).toHaveBeenCalledWith(
'[iFrameSizer]message:"chkSendMsg:test"',
getTarget(iframe1)
)
tearDown(iframe1)
done()
}, 100)
})
it('mock incoming message', function(done) {
iframe = iFrameResize({
log: log,
id: 'sendMessage2',
onMessage: function(messageData) {
expect(messageData.message).toBe('test:test')
done()
}
})[0]
mockMsgFromIFrame(iframe, 'message:"test:test"')
})
it('send message and get response', function(done) {
iframe = iFrameResize({
log: log,
id: 'sendMessage3',
onInit: function(iframe) {
iframe.iFrameResizer.sendMessage('chkSendMsg')
},
onMessage: function(messageData) {
expect(messageData.message).toBe('message: test string')
done()
}
})[0]
})
})
})

View File

@ -0,0 +1,5 @@
{
"spec_dir": "spec",
"spec_files": ["**/*[sS]pec.js"],
"helpers": ["helpers/**/*.js"]
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,34 @@
var allTestFiles = []
var TEST_REGEXP = /(spec|test)\.js$/i
// Get a list of all the test files to include
// eslint-disable-next-line no-underscore-dangle
Object.keys(window.__karma__.files).forEach(function (file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '')
allTestFiles.push(normalizedTestModule)
}
})
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
paths: {
jquery: 'node_modules/jquery/dist/jquery',
iframeResizerMin: 'js/iframeResizer.min',
iframeResizer: 'src/iframeResizer',
iframeResizerContentMin: 'js/iframeResizer.contentWindow.min',
iframeResizerContent: 'src/iframeResizer.contentWindow'
},
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start // eslint-disable-line no-underscore-dangle
})

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.lateload.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
asyncTest('postMessage Response', function() {
iFrameResize({
//log:true,
bodyBackground: 'wheat',
heightCalculationMethod: 'max',
onInit: function(iframe) {
ok(true, 'Receive init message back from iFrame.')
ok('iFrameResizer0' === iframe.id, 'iFrame id = iFrameResizer0.')
setTimeout(function() {
iframe.iFrameResizer.close()
start()
}, 10)
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div class="iframe-wrapper" style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="../src/iframeResizer.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script>
'use strict'
var receivedIframeIds = []
asyncTest('postMessage Response', function() {
iFrameResize({
//log:true,
bodyBackground: 'wheat',
heightCalculationMethod: 'max',
onInit: function(iframe) {
ok(true, 'Receive init message back from iFrame.')
receivedIframeIds.push(iframe.id)
if (receivedIframeIds.length === 2) {
ok(
receivedIframeIds.indexOf('iFrameResizer0') > -1,
'iFrame id = iFrameResizer0 is present.'
)
ok(
receivedIframeIds.indexOf('iFrameResizer1') > -1,
'iFrame id = iFrameResizer1 is present.'
)
} else {
start()
}
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div class="iframe-wrapper" style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../src/iframeResizer.js"></script>
<script>
'use strict'
var $iframeFirst = $('iframe')
var recievedIframeIds = []
function getIframeFirstAttrs() {
var attrs = {}
var blacklistedAttrs = { id: true }
function cloneAllowedAttr() {
var attrName = this.name
if (!(attrName in blacklistedAttrs)) {
attrs[attrName] = this.value
}
}
$.each($iframeFirst[0].attributes, cloneAllowedAttr)
return attrs
}
function addSecondIframeAndScript() {
var $injectedIframe = $('<iframe/>').attr(getIframeFirstAttrs())
var firstScriptSource = $('script[src*=iframeResizer]').attr('src')
$iframeFirst.after($injectedIframe)
$.getScript(firstScriptSource, function() {
iFrameResize({
//log:true,
bodyBackground: 'wheat',
heightCalculationMethod: 'max',
onInit: function(iframe) {
ok(true, 'Receive init message back from iFrame1.')
ok('iFrameResizer1' === iframe.id, 'iFrame id = iFrameResizer1.')
start()
}
})
})
}
asyncTest('postMessage Response', function() {
iFrameResize({
//log:true,
bodyBackground: 'wheat',
heightCalculationMethod: 'max',
onInit: function(iframe) {
ok(true, 'Receive init message back from iFrame0.')
ok('iFrameResizer0' === iframe.id, 'iFrame id = iFrameResizer0.')
addSecondIframeAndScript()
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
var background = 'rgb(245, 222, 179)'
asyncTest('getId', function() {
iFrameResize({
//log:true,
bodyBackground: background,
onResized: function(messageData) {
ok(true, 'Receive init message back from iFrame.')
sendMessage('chkBackground')
},
onMessage: function(messageData) {
ok(background === messageData.message, 'Background = ' + background)
start()
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:400px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
jQuery.noConflict()
asyncTest('iFrame change page', function() {
var evtCounter = 0
jQuery('iframe').iFrameResize({
//log:true,
onResized: function(messageData) {
switch ('' + ++evtCounter) {
case '1':
sendMessage('pageChange')
break
case '2':
ok(
'init' === messageData.type,
'Received ' +
messageData.type +
' message back from iFrame. Expected init'
)
start()
}
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:400px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
asyncTest('iFrame close Event', function() {
var evtCounter = 0
$('iframe').iFrameResize({
//log:true,
onInit: function() {
sendMessage('close')
},
onClosed: function() {
ok(0 === $('iframe').length, 'IFrame removed from page')
start()
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
id="test"
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
asyncTest('getId', function() {
iFrameResize(
{
//log:true,
onResized: function(messageData) {
ok(true, 'Receive init message back from iFrame.')
sendMessage('chkGetId')
},
onMessage: function(messageData) {
ok(messageData.iframe.id === messageData.message, 'getId method.')
start()
}
},
document.getElementById('test')
)
})
</script>
</body>
</html>

View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
asyncTest('iFrame negative interval timer ', function() {
var evtCounter = 0,
started = false
$('iframe').iFrameResize({
//log:true,
interval: -1,
onResized: function(messageData) {
switch ('' + ++evtCounter) {
case '1':
sendMessage('changeContent')
break
default:
//ok( true, 'iFrame detected content change');
if ('resize' !== messageData.type && false === started) {
started = true
ok(
'interval' === messageData.type,
'Received ' +
messageData.type +
' message back from iFrame. Expected interval.'
)
start()
}
}
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script>
//var myOwnJquery = jQuery.noConflict(true);
</script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
asyncTest('init with jQuery.noConflict', function() {
try {
$('iframe').iFrameResize({
//log:true,
bodyBackground: 'wheat',
heightCalculationMethod: 'max',
onInit: function(iframe) {
ok(true, 'Receive init message back from iFrame.')
start()
}
})
} catch (e) {
console.log(e)
ok(false)
start()
}
})
</script>
</body>
</html>

View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
height="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
var MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver
function mutationObserverTest() {
asyncTest('iFrame late image load', function() {
var evtCounter = 0
$('iframe').iFrameResize({
//log:true,
sizeHeight: false,
sizeWidth: true,
interval: 1,
onResized: function(messageData) {
switch ('' + ++evtCounter) {
case '1':
sendMessage('image')
break
case '2':
break
case '3':
ok('imageLoad' === messageData.type, 'type = imageLoad')
start()
}
}
})
})
asyncTest('iFrame late image load with other mutations', function() {
var evtCounter = 0
$('iframe').iFrameResize({
//log:true,
sizeHeight: false,
sizeWidth: true,
interval: 1,
onResized: function(messageData) {
switch ('' + ++evtCounter) {
case '1':
sendMessage('imageAsSecondMutation')
break
case '2':
break
case '3':
ok('imageLoad' === messageData.type, 'type = imageLoad')
start()
}
}
})
})
}
// if (MutationObserver)
// mutationObserverTest()
// else{
// console.warn('(MutationObserver not supported in this browser! Unable to run test)');
// test('iFrame MutationObserver',function(){
// ok(true,'MutationObserver not supported in this browser! Unable to run test.');
// });
// }
</script>
</body>
</html>

View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:1600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
var margins = ['10px 5em', '15px 5ex', '20px', '25px', '75px']
function Counter() {
var i = 0
return function() {
return i++
}
}
var counter = Counter()
for (var i = 0; i !== margins.length; i++) {
asyncTest('Margin ' + margins[i], function() {
var height = 0,
i = counter(), //counteract async
margin = margins[i]
iFrameResize({
//log:true,
bodyMargin: margin,
onResized: function(messageData) {
ok(true, 'Receive message back from iFrame.')
height = parseInt(messageData.height, 10)
sendMessage('chkHeight')
},
onMessage: function(messageData) {
var marginCheck = 2 * parseInt(margin, 10),
bodyHeight = parseInt(messageData.message, 10)
ok(height === marginCheck + bodyHeight, 'Margin = ' + margin)
console.log('.')
start()
}
})
})
}
</script>
</body>
</html>

View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
function mutationObserverTest() {
asyncTest('iFrame MutationObserver', function() {
var evtCounter = 0
$('iframe').iFrameResize({
//log:true,
onResized: function(messageData) {
switch ('' + ++evtCounter) {
case '1':
sendMessage('changeContent')
break
case '2':
ok(true, 'iFrame detected content change')
ok(
'mutationObserver' === messageData.type,
'Received ' +
messageData.type +
' message back from iFrame. Expected mutationObserver'
)
start()
}
}
})
})
}
var msgId = '[iFrameSizerTest]:'
var MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver
if (MutationObserver) mutationObserverTest()
else {
console.warn(
'(MutationObserver not supported in this browser! Unable to run test)'
)
test('iFrame MutationObserver', function() {
ok(
true,
'MutationObserver not supported in this browser! Unable to run test.'
)
})
}
</script>
</body>
</html>

View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
id="parentPage"
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../src/iframeResizer.js"></script>
<script>
'use strict'
var count = 0,
msgId = '[iFrameSizerTest]:'
asyncTest('Nested iFrame', function() {
$('iframe').iFrameResize({
//log:true,
onResized: function(messageData) {
ok(true, 'Receive init message back from iFrame.')
sendMessage('nested')
},
onMessage: function(messageData) {
ok('nested' === messageData.message, 'Nested iFrame sized.')
start()
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
<iframe
src="about:blank"
width="100%"
scrolling="no"
></iframe>
<iframe
src="javascript:void(0)"
width="100%"
scrolling="no"
></iframe>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.js"></script>
<script>
'use strict'
var count = 0,
msgId = '[iFrameSizerTest]:'
asyncTest('sendMessage (string)', function() {
iFrameResize({
//log:true,
onResized: function(messageData) {
ok(true, 'Receive init message back from iFrame.')
sendMessage('chkSendMsg')
},
onMessage: function(messageData) {
ok(
'message: test string' === messageData.message,
'Receive string message back from iFrame via sendMessage function.'
)
start()
}
})
})
asyncTest('sendMessage (object)', function() {
iFrameResize({
//log:true,
onResized: function(messageData) {
ok(true, 'Receive init message back from iFrame.')
sendMessage('chkSendObj')
},
onMessage: function(messageData) {
ok(
'test object' === messageData.message.message,
'Receive object message back from iFrame via sendMessage function.'
)
start()
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<div class="focusable" tabindex="0"></div>
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
tabindex="1"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var regexp1 = /\[iFrameSizer\]\[Host page: iFrameResizer[0-9]+\]/
var regexp2 = /\[Window focus\] IFrame\(iFrameResizer[0-9]+\) not found/
function spyOn(obj, method) {
var original = obj[method]
var spy = {
count: 0,
args: [],
restore: function() {
obj[method] = original
}
}
obj[method] = function() {
var args = [].slice.apply(arguments)
spy.count++
spy.args.push(args)
return original.call(obj, args)
}
return spy
}
function removeIFrameTest() {
asyncTest('Remove iFrame', function() {
var iframeEl = $('iframe')
iframeEl.iFrameResize({
// log: true,
onInit: function() {
var warn = spyOn(console, 'warn')
$('.focusable').focus()
iframeEl[0].parentElement.removeChild(iframeEl[0])
setTimeout(function() {
warn.restore()
if (warn.count > 0) {
warn.args.forEach(function(args) {
ok(
!regexp1.test(args[0]) && !regexp2.test(args[1]),
'No warnings about already removed frames should get logged to the console. Instead "' +
args.join('') +
'" got logged.'
)
})
} else {
ok(
true,
'No warnings about already removed frames got logged to the console.'
)
}
start()
}, 100)
}
})
})
}
if (
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver
) {
removeIFrameTest()
} else {
console.warn(
'(MutationObserver not supported in this browser! Unable to run test)'
)
test('Remove iFrame', function() {
ok(
true,
'MutationObserver not supported in this browser! Unable to run test.'
)
})
}
</script>
</body>
</html>

View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
height="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="resources/testLib.js"></script>
<script src="../js/ie8.polyfils.min.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
asyncTest('iFrame Resize height', function() {
var evtCounter = 0
$('iframe').iFrameResize({
//log:true,
sizeHeight: false,
sizeWidth: true,
interval: 1,
onResized: function(messageData) {
switch ('' + ++evtCounter) {
case '1':
sendMessage('width')
break
case '2':
ok(3000 < parseInt(messageData.width, 10), 'iFrame width<3000')
start()
}
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit LoadHide</title>
<link rel="stylesheet" href="resources/qunit.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div style="width:600px;">
<iframe
src="resources/frame.content.html"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
<script src="resources/qunit.js"></script>
<script src="resources/jquery.js"></script>
<script src="../js/iframeResizer.min.js"></script>
<script>
'use strict'
var msgId = '[iFrameSizerTest]:'
function resize(size) {
console.info('Size width:' + size)
$('#qunit-fixture > div').width(size)
}
asyncTest('iFrame Resize Event', function() {
var evtCounter = 0
$('iframe').iFrameResize({
//log:true,
interval: 1000,
heightCalculationMethod: 'max',
resizeFrom: 'child',
onResized: function(messageData) {
switch ('' + ++evtCounter) {
case '1':
setTimeout(function() {
resize(300)
}, 150)
break
case '2':
setTimeout(function() {
resize(600)
}, 150)
ok(
'resize' === messageData.type,
'1 Received ' +
messageData.type +
' message back from iFrame. Expected resize'
)
ok(
'300' === messageData.width,
'2 iFrame width = ' + messageData.width + '. Expected 300.'
)
break
default:
ok(
'resetPage' === messageData.type,
'3 Received ' +
messageData.type +
' message back from iFrame. Expected resetPage'
)
if ('600' === messageData.width) {
ok(
'600' === messageData.width,
'4 iFrame width = ' + messageData.width + '. Expected 600.'
)
start()
}
}
}
})
})
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

View File

@ -0,0 +1,270 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<script src="jquery.js"></script>
<style>
a { float:right; }
</style>
</head>
<body>
<b>iFrame</b>
<div>Some content to be replaced</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who
has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who
avoids a pain that produces no resultant pleasure?
</p>
<p>
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound
to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<script type="text/javascript">
(function () {
var logging = true;
try {
function addEventListener(e, func) {
if (window.addEventListener) {
window.addEventListener(e, func, false);
} else if (window.attachEvent) {
window.attachEvent('on' + e, func);
}
}
function log(msg) {
if (logging && window.console) {
console.info('[Test] ' + msg);
}
}
function warn(msg) {
if (window.console) {
console.warn('[Test] ' + msg);
}
}
function init(test) {
function changeContent() {
$('p').eq(0).remove();
}
function callMethod(methodName, val1, val2) {
if ('parentIFrame' in window)
window.parentIFrame[methodName](val1, val2);
else
warn('window.parentIFrame methods not enabled.')
}
//console.info(test);
switch (test) {
case 'changeContent':
setInterval(function () { changeContent(); }, 2);
break;
case 'close':
init('imageAsSecondMutation');
setTimeout(function () {
callMethod('close');
}, 2000);
break;
case 'pageChange':
location.href = '../../example/frame.hover.html';
break;
case 'nested':
location.href = 'frame.nested.html';
break;
case 'size':
changeContent();
callMethod('size');
break;
case 'autoResize':
callMethod('setAutoResize', true);
setTimeout(function () {
changeContent();
}, 500);
break;
case 'size100':
callMethod('size', 100);
break;
case 'size200300':
callMethod('size', 200, 300);
break;
case 'jsTrigger':
changeContent();
callMethod('trigger');
break;
case 'chkHeight':
callMethod('sendMessage', document.body.offsetHeight);
break;
case 'chkBackground':
callMethod('sendMessage', document.body.style.background);
break;
case 'chkSendMsg':
callMethod('sendMessage', 'message: test string');
break;
case 'chkSendObj':
callMethod('sendMessage', { message: 'test object' });
break;
case 'chkGetId':
if ('parentIFrame' in window)
callMethod('sendMessage', window.parentIFrame.getId());
break;
case 'setHeightCalculationMethod':
if ('parentIFrame' in window) {
parentIFrame.setHeightCalculationMethod('max');
callMethod('size');
}
break;
case 'width':
$('p').width(3000);
break;
case 'image':
$('p').html('<img src="djb.jpg">');
break;
case 'imageAsSecondMutation':
$('div').html('How now brown cow');
$('p').html('<img src="djb.jpg">');
$('b').html('<img src="djb2.jpg">');
break;
}
}
window.iFrameResizer = {
onMessage: init
}
}
catch (e) {
warn(e);
}
})();
</script>
<script type="text/javascript" src="../../js/iframeResizer.contentWindow.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
*,
*:before,
*:after {
box-model: border-box;
}
a {
float: right;
margin-left: 10px;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<h2>Late load JS test</h2>
<p>Load JS with require after load event has fired.</p>
<div style="margin:20px;">
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
setTimeout(function () {
console.log('Load Script');
$.getScript('../../js/iframeResizer.contentWindow.min.js');
}, 500);
});
</script>
</body>
</html>

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
*, *:before, *:after {box-model: border-box;}
a { float:right; margin-left:10px;}
h2 {margin-top: 0;}
</style>
</head>
<body>
<h2>Nested iFrame</h2>
<p>Resize window or click one of the links in the nested iFrame to watch it resize.</p>
<div style="margin:20px;">
<iframe id="nestedIFrame" src="frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<p id="callback">
</p>
<script type="text/javascript" src="../../js/iframeResizer.contentWindow.min.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="../../src/iframeResizer.js"></script>
<script type="text/javascript" src="../../js/ie8.polyfils.min.js"></script>
<script type="text/javascript">
iFrameResize({
//log : true, // Enable console logging
onResized: function (messageData) { // Callback fn when message is received
setTimeout(function () { parentIFrame.sendMessage('nested') }, 50);
}
});
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,244 @@
/**
* QUnit v1.12.0 - A JavaScript Unit Testing Framework
*
* https://qunitjs.com
*
* Copyright 2012 jQuery Foundation and other contributors
* Released under the MIT license.
* https://jquery.org/license
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
#qunit-header a {
text-decoration: none;
color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
}
#qunit-testrunner-toolbar label {
display: inline-block;
padding: 0 .5em 0 .1em;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
overflow: hidden;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
#qunit-modulefilter-container {
float: right;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li a {
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests li .runtime {
float: right;
font-size: smaller;
}
.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.qunit-collapsed {
display: none;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: black; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
padding: 5px;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #3c510c;
background-color: #fff;
border-left: 10px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 10px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: green; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/** Result */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
border-bottom: 1px solid white;
}
#qunit-testresult .module-name {
font-weight: bold;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,9 @@
function sendMessage(msg) {
'use strict';
//var msgId = '[iFrameSizerTest]:';
//document.getElementsByTagName('iframe')[0].contentWindow.postMessage( msgId + msg, '*' );
//console.log('Sending '+msg);
document.getElementsByTagName('iframe')[0].iFrameResizer.sendMessage(msg);
}

Some files were not shown because too many files have changed in this diff Show More