28 |
29 |
30 |
31 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Src/License.txt:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2012 İlker Güller
4 |
5 | Permission is hereby granted, free of charge, to any person
6 | obtaining a copy of this software and associated documentation
7 | files (the "Software"), to deal in the Software without
8 | restriction, including without limitation the rights to use,
9 | copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the
11 | Software is furnished to do so, subject to the following
12 | conditions:
13 |
14 | The above copyright notice and this permission notice shall be
15 | included in all copies or substantial portions of the Software.
16 |
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
24 | OTHER DEALINGS IN THE SOFTWARE.
25 |
26 | GPL License
27 |
28 | Copyright (c) 2012 İlker Güller
29 |
30 | This program is free software: you can redistribute it and/or modify
31 | it under the terms of the GNU General Public License as published by
32 | the Free Software Foundation, either version 3 of the License, or
33 | (at your option) any later version.
34 |
35 | This program is distributed in the hope that it will be useful,
36 | but WITHOUT ANY WARRANTY; without even the implied warranty of
37 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
38 | GNU General Public License for more details.
39 |
40 | You should have received a copy of the GNU General Public License
41 | along with this program. If not, see .
--------------------------------------------------------------------------------
/Demos/crossdomain_inpage.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Cross Domain Demo | Iframe Auto Height by Ilker Guller
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
Cross Domain Inside Page Demo
20 |
You must use "postmessage" event on your cross domain page. (Click Here or Click Here for Details)
21 |
22 |
And also you must upload this page to your external server and change iframe src to that page. If you don't that, you can't see demo correctly. If you upload, you just ignore this :)
You must use "postmessage" event on your cross domain page. (Click Here or Click Here for Details)
21 |
22 |
And also you must upload "crossdomain_inpage.html" page to your external server and change iframe src to that page. If you don't that, you can't see demo correctly.
You must use "postmessage" event on your cross domain page. (Click Here or Click Here for Details)
21 |
22 |
And also you must upload "crossdomain_inpage.html" page to your external server and change iframe src to that page. If you don't that, you can't see demo correctly.
You must use "postmessage" event on your cross domain page. (Click Here or Click Here for Details)
21 |
22 |
And also you must upload this page to your external server and change iframe src to that page. If you don't that, you can't see demo correctly. If you upload, you just ignore this :)
23 |
24 |
Also You can add event listener to trigger update iframe
25 |
26 |
27 |
28 |
31 |
32 |
33 |
34 |
35 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | #################
2 | ## Eclipse
3 | #################
4 |
5 | *.pydevproject
6 | .project
7 | .metadata
8 | bin/
9 | tmp/
10 | *.tmp
11 | *.bak
12 | *.swp
13 | *~.nib
14 | local.properties
15 | .classpath
16 | .settings/
17 | .loadpath
18 |
19 | # External tool builders
20 | .externalToolBuilders/
21 | .idea/
22 | *.idea
23 |
24 | # Locally stored "Eclipse launch configurations"
25 | *.launch
26 |
27 | # CDT-specific
28 | .cproject
29 |
30 | # PDT-specific
31 | .buildpath
32 |
33 |
34 | #################
35 | ## Visual Studio
36 | #################
37 |
38 | ## Ignore Visual Studio temporary files, build results, and
39 | ## files generated by popular Visual Studio add-ons.
40 |
41 | # User-specific files
42 | *.suo
43 | *.user
44 | *.sln.docstates
45 |
46 | # Build results
47 | [Dd]ebug/
48 | [Rr]elease/
49 | *_i.c
50 | *_p.c
51 | *.ilk
52 | *.meta
53 | *.obj
54 | *.pch
55 | *.pdb
56 | *.pgc
57 | *.pgd
58 | *.rsp
59 | *.sbr
60 | *.tlb
61 | *.tli
62 | *.tlh
63 | *.tmp
64 | *.vspscc
65 | .builds
66 | *.dotCover
67 |
68 | ## TODO: If you have NuGet Package Restore enabled, uncomment this
69 | #packages/
70 |
71 | # Visual C++ cache files
72 | ipch/
73 | *.aps
74 | *.ncb
75 | *.opensdf
76 | *.sdf
77 |
78 | # Visual Studio profiler
79 | *.psess
80 | *.vsp
81 |
82 | # ReSharper is a .NET coding add-in
83 | _ReSharper*
84 |
85 | # Installshield output folder
86 | [Ee]xpress
87 |
88 | # DocProject is a documentation generator add-in
89 | DocProject/buildhelp/
90 | DocProject/Help/*.HxT
91 | DocProject/Help/*.HxC
92 | DocProject/Help/*.hhc
93 | DocProject/Help/*.hhk
94 | DocProject/Help/*.hhp
95 | DocProject/Help/Html2
96 | DocProject/Help/html
97 |
98 | # Click-Once directory
99 | publish
100 |
101 | # Others
102 | [Bb]in
103 | [Oo]bj
104 | sql
105 | TestResults
106 | *.Cache
107 | ClientBin
108 | stylecop.*
109 | ~$*
110 | *.dbmdl
111 | Generated_Code #added for RIA/Silverlight projects
112 |
113 | # Backup & report files from converting an old project file to a newer
114 | # Visual Studio version. Backup files are not needed, because we have git ;-)
115 | _UpgradeReport_Files/
116 | Backup*/
117 | UpgradeLog*.XML
118 |
119 |
120 |
121 | ############
122 | ## Windows
123 | ############
124 |
125 | # Windows image file caches
126 | Thumbs.db
127 |
128 | # Folder config file
129 | Desktop.ini
130 |
131 |
132 | #############
133 | ## Python
134 | #############
135 |
136 | *.py[co]
137 |
138 | # Packages
139 | *.egg
140 | *.egg-info
141 | dist
142 | build
143 | eggs
144 | parts
145 | bin
146 | var
147 | sdist
148 | develop-eggs
149 | .installed.cfg
150 |
151 | # Installer logs
152 | pip-log.txt
153 |
154 | # Unit test / coverage reports
155 | .coverage
156 | .tox
157 |
158 | #Translations
159 | *.mo
160 |
161 | #Mr Developer
162 | .mr.developer.cfg
163 |
164 | # Mac crap
165 | .DS_Store
166 |
--------------------------------------------------------------------------------
/Src/iframeheight.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | Jquery Iframe Auto Height Plugin
3 | Version 1.2.5 (09.10.2013)
4 |
5 | Author : Ilker Guller (http://ilkerguller.com)
6 |
7 | Description: This plugin can get contents of iframe and set height of iframe automatically. Also it has cross-domain fix (*).
8 | Details: http://github.com/Sly777/Iframe-Height-Jquery-Plugin
9 | */
10 |
11 | (function($){var uuid=0;var iframeOptions={resizeMaxTry:4,resizeWaitTime:50,minimumHeight:200,defaultHeight:3000,heightOffset:0,exceptPages:"",debugMode:false,visibilitybeforeload:false,blockCrossDomain:false,externalHeightName:"bodyHeight",onMessageFunctionName:"getHeight",domainName:"*",watcher:false,watcherTime:400};$.iframeHeight=function(el,options){var base=this;$.iframeHeight.resizeTimeout=null;$.iframeHeight.resizeCount=0;base.$el=$(el);base.el=el;base.$el.before("");base.$el.appendTo("#iframeHeight-Container-"+uuid);base.$container=$("#iframeHeight-Container-"+uuid);base.$el.data("iframeHeight",base);base.watcher=null;base.debug={FirstTime:true,Init:function(){if(!('console'in window))console={};'log info warn error dir clear'.replace(/\w+/g,function(f){if(!(f in console))console[f]=console.log||new Function})},Log:function(message){if(this.FirstTime&&this.FirstTime===true){this.Init();this.FirstTime=false}if(base.options.debugMode&&base.options.debugMode===true&&console&&(message!==null||message!=="")){console["log"]("Iframe Plugin : "+message)}},GetBrowserInfo:(function(pub){var matched,browserObj;var uaMatch=function(ua){ua=ua.toLowerCase();if(/*@cc_on/*@if(@_jscript_version<=5.6)1@else@*/0/*@end@*/){ua="msie 6.0"}var match=/(chrome)[ \/]([\w.]+)/.exec(ua)||/(webkit)[ \/]([\w.]+)/.exec(ua)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua)||/(msie) ([\w.]+)/.exec(ua)||ua.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)||[];return{browserObj:match[1]||"",version:match[2]||"0"}};matched=uaMatch(navigator.userAgent);browserObj={chrome:false,safari:false,mozilla:false,msie:false,webkit:false};if(matched.browserObj){browserObj[matched.browserObj]=true;browserObj.version=matched.version}if(browserObj.chrome){browserObj.webkit=true}else if(browserObj.webkit){browserObj.safari=true}pub=browserObj;return pub}(this.GetBrowserInfo||{}))};var isThisCDI=function(){try{var contentHtml;if(base.debug.GetBrowserInfo.msie&&base.debug.GetBrowserInfo.version=="7.0"){contentHtml=base.$el.get(0).contentWindow.location.href}else{contentHtml=base.$el.get(0).contentDocument.location.href}base.debug.Log("This page is non-Cross Domain - "+contentHtml);return false}catch(err){base.debug.Log("This page is Cross Domain");return true}};base.resetIframe=function(){if(base.options.visibilitybeforeload&&!(base.debug.GetBrowserInfo.msie&&base.debug.GetBrowserInfo.version=="7.0"))base.$el.css("visibility","hidden");base.debug.Log("Old Height is "+base.$el.height()+"px");base.$el.css("height","").removeAttr("height");base.debug.Log("Reset iframe");base.debug.Log("Height is "+base.$el.height()+"px after reset")};base.resizeFromOutside=function(event){if(base.options.blockCrossDomain){base.debug.Log("Blocked cross domain fix");return false}if(typeof event==="undefined")return false;if(typeof event.data=="string"){if(event.data=="reset"){base.$el.css("height","").removeAttr("height")}else{if(!/^ifh*/.test(event.data))return false;if(typeof parseInt(event.data.substring(3))!="number")return false;var frameHeightPx=parseInt(event.data.substring(3))+parseInt(base.options.heightOffset);base.resetIframe();base.setIframeHeight(frameHeightPx)}}else{return false}return true};base.checkMessageEvent=function(){if(base.options.blockCrossDomain||(base.debug.GetBrowserInfo.msie&&base.debug.GetBrowserInfo.version=="7.0")){base.debug.Log("Blocked cross domain fix");return false}base.resetIframe();if(base.options.visibilitybeforeload&&!(base.debug.GetBrowserInfo.msie&&base.debug.GetBrowserInfo.version=="7.0"))base.$el.css("visibility","visible");if(window.addEventListener){window.addEventListener('message',base.resizeFromOutside,false)}else if(window.attachEvent){window.attachEvent('onmessage',base.resizeFromOutside)}if(!base.$el.id){base.$el.id="iframe-id-"+(++uuid)}var frame=document.getElementById(base.$el.attr("id"));var message=base.options.onMessageFunctionName;if(frame.contentWindow.postMessage){frame.contentWindow.postMessage(message,"*")}else{base.debug.Log("Your browser does not support the postMessage method!");return false}base.debug.Log("Cross Domain Iframe started");return true};var tryFixIframe=function(){if($.iframeHeight.resizeCount<=base.options.resizeMaxTry){$.iframeHeight.resizeCount++;$.iframeHeight.resizeTimeout=setTimeout($.iframeHeight.resizeIframe,base.options.resizeWaitTime);base.debug.Log($.iframeHeight.resizeCount+" time(s) tried")}else{clearTimeout($.iframeHeight.resizeTimeout);$.iframeHeight.resizeCount=0;base.debug.Log("set default height for iframe");base.setIframeHeight(base.options.defaultHeight+base.options.heightOffset)}};base.sendInfotoTop=function(){if(top.length>0&&typeof JSON!="undefined"){var data={};data[base.options.externalHeightName].value=$(document).height();var domain='*';data=JSON.stringify(data);top.postMessage(data,domain);base.debug.Log("sent info to top page");return false}return true};base.setIframeHeight=function(_height){base.$el.height(_height).css("height",_height);if(base.$el.data("iframeheight")!=_height)base.$container.height(_height).css("height",_height);if(base.options.visibilitybeforeload&&!(base.debug.GetBrowserInfo.msie&&base.debug.GetBrowserInfo.version=="7.0"))base.$el.css("visibility","visible");base.debug.Log("Now iframe height is "+_height+"px");base.$el.data("iframeheight",_height)};$.iframeHeight.resizeIframe=function(){base.resetIframe();if(isThisCDI()){base.$el.height(base.options.defaultHeight+base.options.heightOffset).css("height",base.options.defaultHeight+base.options.heightOffset);if(base.options.visibilitybeforeload&&!(base.debug.GetBrowserInfo.msie&&base.debug.GetBrowserInfo.version=="7.0"))base.$el.css("visibility","visible");base.checkMessageEvent()}else{if(base.$el.css("height")===base.options.minimumHeight+"px"){base.resetIframe()}if(base.$el.get(0).contentWindow.document.body!==null){base.debug.Log("This page has body info");var _pageHeight=$(base.$el.get(0).contentWindow.document).height();var _pageName=base.$el.get(0).contentWindow.document.location.pathname.substring(base.$el.get(0).contentWindow.document.location.pathname.lastIndexOf('/')+1).toLowerCase();base.debug.Log("page height : "+_pageHeight+"px || page name : "+_pageName);if((_pageHeight<=base.options.minimumHeight&&base.options.exceptPages.indexOf(_pageName)==-1)){tryFixIframe()}else if(_pageHeight>base.options.minimumHeight&&base.options.exceptPages.indexOf(_pageName)==-1){base.setIframeHeight(_pageHeight+base.options.heightOffset)}}else{base.debug.Log("This page has not body info");tryFixIframe()}}};this.$el.bind("updateIframe",function(){$.iframeHeight.resizeIframe();base.debug.Log("Updated Iframe Manually")});this.$el.bind("killWatcher",function(){window.clearInterval(base.watcher);base.debug.Log("Killed Watcher")});base.init=function(){base.options=$.extend({},$.iframeHeight.defaultOptions,options);if(base.options.watcher==true)base.options.blockCrossDomain=true;base.debug.Log(base.options);if(base.$el.get(0).tagName===undefined||base.$el.get(0).tagName.toLowerCase()!=="iframe"){base.debug.Log("This element is not iframe!");return false}$.iframeHeight.resizeIframe();base.$el.load(function(){$.iframeHeight.resizeIframe()});if(base.options.watcher){base.watcher=setInterval(function(){$.iframeHeight.resizeIframe();base.debug.Log("Checked Iframe")},base.options.watcherTime)}return true};base.init()};$.iframeHeight.defaultOptions=iframeOptions;$.fn.iframeHeight=function(options){return this.each(function(){(new $.iframeHeight(this,options))})};$.iframeHeightExternal=function(){if(arguments.length===1){if($.isPlainObject(arguments[0])){iframeOptions=arguments[0]}}if(window.addEventListener){window.addEventListener("message",OnMessage,false)}else if(window.attachEvent){window.attachEvent("onmessage",OnMessage)}function OnMessage(event){var _domain;if('domain'in event){_domain=event.domain}if('origin'in event){_domain=event.origin}if(iframeOptions.domainName!=="*"){if(_domain!==iframeOptions.domainName){$.iframeHeight.debug.Log("It's not same domain. Blocked!");return}}if(event.data==iframeOptions.onMessageFunctionName){var message="ifh"+$(document).height();event.source.postMessage(message,event.origin)}}return{update:function(){this.reset();window.__domainname=iframeOptions.domainName;setTimeout(function(){var message="ifh"+$(document).height();parent.postMessage(message,window.__domainname)},90)},reset:function(){parent.postMessage("reset",iframeOptions.domainName)}}}})(jQuery);
12 |
--------------------------------------------------------------------------------
/readme.markdown:
--------------------------------------------------------------------------------
1 | Iframe Height Jquery Plugin [](http://libscore.com#$.fn.iframeHeight)
2 | =============
3 | (Version 1.2.5) - 09.10.2013
4 |
5 | This plugin can get contents of iframe and set height of iframe automatically. Also it has cross-domain fix (* You should read tutorial below).
6 |
7 | Uncompressed Version : 13.8KB (2.69KB gzipped)
8 | Compressed Version : 6.28KB (2KB gzipped)
9 |
10 | ## Usage
11 |
12 | ----------------------------------
13 |
14 | - include the latest version jquery in your page
15 | - include the latest version iframe height plugin
16 | - use .iframeHeight() to iframe that you want to fix
17 | - use $.iframeHeightExternal() to send external page height to iframe
18 | - also you can install this plugin using [Jam.js](http://jamjs.org/packages/#/details/Iframe-Auto-Height-Jquery-Plugin "http://jamjs.org/packages/#/details/Iframe-Auto-Height-Jquery-Plugin") or [Bower](http://twitter.github.com/bower/ "http://twitter.github.com/bower/") *(plugin name : iframe-auto-height-jquery-plugin)*
19 |
20 | ----------------------------------
21 |
22 | ## Examples
23 |
24 | ----------------------------------
25 |
26 | __Basic Usage__ :
27 |
28 | ```javascript
29 | $(document).ready(function(){
30 | $('#autoIframe').iframeHeight();
31 | });
32 | ```
33 |
34 | or
35 |
36 | ```javascript
37 | $(document).ready(function(){
38 | $.iframeHeight('#autoIframe');
39 | });
40 | ```
41 |
42 | __Debug Mode Usage__ :
43 |
44 | ```javascript
45 | $('#autoIframe').iframeHeight({
46 | debugMode : true
47 | });
48 | ```
49 |
50 | __Full Options Usage__ :
51 |
52 | ```javascript
53 | $('#autoIframe').iframeHeight({
54 | resizeMaxTry : 2,
55 | resizeWaitTime : 300,
56 | minimumHeight : 100,
57 | defaultHeight : 500,
58 | heightOffset : 90,
59 | exceptPages : "",
60 | debugMode : false,
61 | visibilitybeforeload : true,
62 | blockCrossDomain : true,
63 | externalHeightName : "bodyHeight",
64 | onMessageFunctionName: "getHeight",
65 | domainName : "*",
66 | watcher : false,
67 | watcherTime : 400
68 | });
69 | ```
70 |
71 | ----------------------------------
72 |
73 | ## Options
74 |
75 | ----------------------------------
76 |
77 | - __resizeMaxTry__ : how many try that find true values (default : 4 Times)
78 | - __resizeWaitTime__ : wait time before next try (default : 50ms)
79 | - __minimumHeight__ : minimum height for iframe (default : 200px)
80 | - __defaultHeight__ : default height for iframe (default: 1000px)
81 | - __heightOffset__ : default top offset for iframe (default : 0px)
82 | - __exceptPages__ : Pages that doesnt need auto height (default : "")
83 | - __debugMode__ : Debug Mode (default : false)
84 | - __visibilitybeforeload__ : If you change this to true, iframe will be invisible when every iframe load (default : false)
85 | - __blockCrossDomain__ : Set true if you dont want use cross domain fix (default : false)
86 | - __externalHeightName__ : Height data name that comes from postMessage (CDI) and gives height value
87 | - __onMessageFunctionName__ : Function name that plugin calls this to get data from external source
88 | - __domainName__ : Set this if you want to get data from specific domain
89 | - __watcher__ : Set true if you want to watch iframe document changes automatically (default : false)
90 | - __watcherTime__ : Watcher Control Time (default : 400ms)
91 |
92 | ----------------------------------
93 |
94 | ## Functions
95 |
96 | ----------------------------------
97 |
98 | These are triggers for iframe so You can use these like __"$('#iframe').trigger("FUNCTIONNAMES");"__
99 |
100 | - __updateIframe__ : Trigger to Update Iframe Height Manually
101 | - __killWatcher__ : Kill Watcher to stop to update iframe automatically
102 |
103 | ----------------------------------
104 |
105 | ## Details
106 |
107 | ----------------------------------
108 |
109 | > - __iframeheight.js__ is development version. __iframeheight.min.js__ is produce version (minified).
110 | > - When you use it for cross domain fix, You must use __postMessage__ function on page in iframe. ([Click Here](http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes) or [Click Here](http://help.dottoro.com/ljjqtjsj.php) for Details). Tutorial is below
111 | > - You shouldn't use it on local because it doesnt work correctly in chrome (chrome gives cross domain error on local)
112 | > - __Cross-Domain__ and __Watcher__ cannot work together. If you want to enable watcher, you cannot use crossdomain fix.
113 |
114 | ----------------------------------
115 |
116 | ## Demos
117 |
118 | ----------------------------------
119 |
120 | You can see files inside of __Demos__ Folder.
121 |
122 | ----------------------------------
123 |
124 | ## Change Log
125 |
126 | ----------------------------------
127 |
128 | Version 1.2.5 (09.10.2013) :
129 | > - Fixed IE8 postMessage issue (Thanks to [Lincetto](https://github.com/lincetto "https://github.com/lincetto"))
130 | > - Fixed setTimeout call when jQuery is in noConflict mode (Thanks to [Thibaud Colas](https://github.com/ThibWeb "https://github.com/ThibWeb"))
131 | > - Fixed Iframe Location (Thanks to [James75](https://github.com/james75 "https://github.com/james75"))
132 | > - Fixed Watcher Update Flick
133 | > - Added Contributors & TODO List sections to readme file
134 |
135 | Version 1.2.4 (12.09.2013) :
136 | > - Now you can trigger update from external page (Crossdomain)
137 | > - Added Cross Domain Click Trigger Demo
138 | > - Fixed container height setter
139 |
140 | Version 1.2.3 (18.08.2013) :
141 | > - Cross domain & Watcher control added
142 | > - Cross domain number control fixed
143 | > - Watcher scroll problem fixed
144 |
145 | Version 1.2.2 (12.08.2013) :
146 | > - Added Watcher! Now plugin can control iframe height automatically.
147 | > - Added 2 Trigger: updateIframe & killWatcher (Look "Functions" Title for Details)
148 | > - Added Watcher Demo Page
149 | > - Added Github Tags
150 | > - Fixed ID Problem (Thanks to [Thibaud Colas](https://github.com/ThibWeb "https://github.com/ThibWeb"))
151 |
152 | Version 1.2.1 (20.04.2013) :
153 | > - Fixed Cross-domain check for Internet explorer 7
154 | > - Changed ScrollHeight() to Jquery's Height() (Thanks to [archiechen](https://github.com/archiechen "https://github.com/archiechen"))
155 |
156 | Version 1.2.0 (20.02.2013) :
157 | > - **Jquery 1.9.x compatible now**
158 | > - **Cross Domain Demo added**
159 | > - Cross Domain Tutorial added (look below)
160 | > - Added 2 options (onMessageFunctionName, DomainName)
161 | > - Completely Updated Cross-domain fix (It tested on Chrome, Firefox, IE9, IE8)
162 | > - Added External Function ($.iframeHeightExternal())
163 |
164 | Version 1.1.0 (27.08.2012) :
165 | > - Fixed Internet explorer 7 hidden element problem
166 | > - Added Cross-domain data name option
167 | > - Added reset.css to demo pages ([http://meyerweb.com/eric/tools/css/reset/](http://meyerweb.com/eric/tools/css/reset/))
168 |
169 | Version 1.0.0 (21.06.2012) :
170 | > - Files uploaded to Github
171 |
172 | ----------------------------------
173 |
174 | ## Author
175 |
176 | ----------------------------------
177 |
178 | Ilker Guller (http://ilkerguller.com)
179 |
180 | ----------------------------------
181 |
182 | ## Contributors
183 |
184 | ----------------------------------
185 |
186 | > - [Thibaud Colas](https://github.com/ThibWeb "https://github.com/ThibWeb")
187 | > - [Bernd Matzner](https://github.com/bmatzner "https://github.com/bmatzner")
188 | > - [Lincetto](https://github.com/lincetto "https://github.com/lincetto")
189 | > - [James75](https://github.com/james75 "https://github.com/james75")
190 | > - [archiechen](https://github.com/archiechen "https://github.com/archiechen")
191 |
192 | ----------------------------------
193 |
194 | ## TODO List
195 |
196 | ----------------------------------
197 |
198 | > - Works with two or more iframes
199 | > - Decrease memory uses
200 |
201 | ----------------------------------
202 |
203 | ## For Issues, New Features, Grammar problems :)
204 |
205 | ----------------------------------
206 |
207 | If you find issues or you want to add new features, feel free to post them to the 'Issues' tab.
208 |
209 | ----------------------------------
210 |
211 | ## License
212 |
213 | ----------------------------------
214 |
215 | **MIT License**
216 |
217 | Copyright (c) 2012 İlker Güller
218 |
219 | Permission is hereby granted, free of charge, to any person
220 | obtaining a copy of this software and associated documentation
221 | files (the "Software"), to deal in the Software without
222 | restriction, including without limitation the rights to use,
223 | copy, modify, merge, publish, distribute, sublicense, and/or sell
224 | copies of the Software, and to permit persons to whom the
225 | Software is furnished to do so, subject to the following
226 | conditions:
227 |
228 | The above copyright notice and this permission notice shall be
229 | included in all copies or substantial portions of the Software.
230 |
231 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
232 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
233 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
234 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
235 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
236 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
237 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
238 | OTHER DEALINGS IN THE SOFTWARE.
239 |
240 | **GPL License**
241 |
242 | Copyright (c) 2012 İlker Güller
243 |
244 | This program is free software: you can redistribute it and/or modify
245 | it under the terms of the GNU General Public License as published by
246 | the Free Software Foundation, either version 3 of the License, or
247 | (at your option) any later version.
248 |
249 | This program is distributed in the hope that it will be useful,
250 | but WITHOUT ANY WARRANTY; without even the implied warranty of
251 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
252 | GNU General Public License for more details.
253 |
254 | You should have received a copy of the GNU General Public License
255 | along with this program. If not, see .
256 |
257 | ----------------------------------
258 |
259 | ## Cross Domain Tutorial
260 |
261 | ----------------------------------
262 |
263 | You can test it after upload "crossdomain_inpage.html" file (its in demos folder) to external server.
264 |
265 | Firstly, you must upload this plugin to 2 server (base website and external server). After that, call " $.iframeHeightExternal();" function from external page. Tadaam! It finished. :)
266 |
267 | Important thing is, if you change default options (in your base website), you must add your setting object to function ($.iframeHeightExternal()) that using on your external website. For Example;
268 |
269 | *when using it in your base website*
270 |
271 | ```javascript
272 | $('#autoIframe').iframeHeight({
273 | debugMode : true,
274 | minimumHeight: 450,
275 | onMessageFunctionName: "dummyFunc"
276 | });
277 | ```
278 |
279 | *then set it in your external site*
280 |
281 | ```javascript
282 | $.iframeHeightExternal({
283 | debugMode : true,
284 | minimumHeight: 450,
285 | onMessageFunctionName: "dummyFunc"
286 | });
287 | ```
288 |
289 | *If you want to trigger from any element to update iframe*
290 |
291 | ```javascript
292 | var iframeExt = $.iframeHeightExternal({
293 | debugMode : true,
294 | minimumHeight: 450,
295 | onMessageFunctionName: "dummyFunc"
296 | });
297 | $('button').on("click", function(){ iframeExt.update(); });
298 | ```
299 |
--------------------------------------------------------------------------------
/Src/iframeheight.js:
--------------------------------------------------------------------------------
1 | /*
2 | Jquery Iframe Auto Height Plugin
3 | Version 1.2.5 (09.10.2013)
4 |
5 | Author : Ilker Guller (http://ilkerguller.com)
6 |
7 | Description: This plugin can get contents of iframe and set height of iframe automatically. Also it has cross-domain fix (*).
8 | Details: http://github.com/Sly777/Iframe-Height-Jquery-Plugin
9 | */
10 |
11 | (function($){
12 | var uuid = 0; // Unique ID counter for iframes with no ID
13 | var iframeOptions = {
14 | resizeMaxTry : 4, // how many try that find true values
15 | resizeWaitTime : 50, // wait time before next try
16 | minimumHeight : 200, // minimum height for iframe
17 | defaultHeight : 3000, // default height for iframe
18 | heightOffset : 0, // default top offset for iframe
19 | exceptPages : "", // Pages that doesnt need auto height
20 | debugMode : false, // Debug mode
21 | visibilitybeforeload : false, // If you change this to true, iframe will be invisible when every iframe load
22 | blockCrossDomain : false, // Set true if you dont want use cross domain fix
23 | externalHeightName : "bodyHeight", // Height data name that comes from postMessage (CDI) and gives height value
24 | onMessageFunctionName: "getHeight", // Function name that plugin calls this to get data from external source
25 | domainName : "*", // Set this if you want to get data from specific domain
26 | watcher : false, // Set true if you want to watch iframe document changes automatic
27 | watcherTime : 400 // Watcher control Milliseconds
28 | };
29 |
30 | $.iframeHeight = function(el, options){
31 | var base = this;
32 | $.iframeHeight.resizeTimeout = null;
33 | $.iframeHeight.resizeCount = 0;
34 |
35 | base.$el = $(el);
36 | base.el = el;
37 |
38 | base.$el.before("");
39 | base.$el.appendTo("#iframeHeight-Container-" + uuid);
40 | base.$container = $("#iframeHeight-Container-" + uuid);
41 |
42 | base.$el.data("iframeHeight", base);
43 | base.watcher = null;
44 |
45 | base.debug = {
46 | FirstTime : true,
47 | Init : function() {
48 | if (!('console' in window)) console={};
49 | 'log info warn error dir clear'.replace(/\w+/g,function(f) {
50 | if (!(f in console)) console[f]=console.log||new Function;
51 | });
52 | },
53 | Log : function(message) {
54 | if(this.FirstTime && this.FirstTime === true){
55 | this.Init();
56 | this.FirstTime = false;
57 | }
58 | if (base.options.debugMode && base.options.debugMode === true && console && (message !== null || message !== "")) {
59 | console["log"]("Iframe Plugin : " + message);
60 | }
61 | },
62 | GetBrowserInfo : (function (pub) { // this function is from Jquery.Migrate with IE6 & Browser Null Fix
63 | var matched, browserObj;
64 | var uaMatch = function (ua) {
65 | ua = ua.toLowerCase();
66 | if (/*@cc_on/*@if(@_jscript_version<=5.6)1@else@*/0/*@end@*/) {
67 | ua = "msie 6.0";
68 | }
69 | var match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||
70 | /(webkit)[ \/]([\w.]+)/.exec(ua) ||
71 | /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) ||
72 | /(msie) ([\w.]+)/.exec(ua) ||
73 | ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) ||
74 | [];
75 | return {
76 | browserObj: match[ 1 ] || "",
77 | version: match[ 2 ] || "0"
78 | };
79 | };
80 | matched = uaMatch(navigator.userAgent);
81 | browserObj = {
82 | chrome: false,
83 | safari: false,
84 | mozilla: false,
85 | msie: false,
86 | webkit: false
87 | };
88 | if ( matched.browserObj ) {
89 | browserObj[ matched.browserObj ] = true;
90 | browserObj.version = matched.version;
91 | }
92 |
93 | if (browserObj.chrome) {
94 | browserObj.webkit = true;
95 | } else if (browserObj.webkit) {
96 | browserObj.safari = true;
97 | }
98 | pub = browserObj;
99 | return pub;
100 | }(this.GetBrowserInfo || {}))
101 | };
102 |
103 | var isThisCDI = function(){
104 | try
105 | {
106 | var contentHtml;
107 | if (base.debug.GetBrowserInfo.msie && base.debug.GetBrowserInfo.version == "7.0") {
108 | contentHtml = base.$el.get(0).contentWindow.location.href;
109 | } else {
110 | contentHtml = base.$el.get(0).contentDocument.location.href;
111 | }
112 | base.debug.Log("This page is non-Cross Domain - " + contentHtml);
113 | return false;
114 | }
115 | catch(err)
116 | {
117 | base.debug.Log("This page is Cross Domain");
118 | return true;
119 | }
120 | };
121 |
122 | base.resetIframe = function(){
123 | if(base.options.visibilitybeforeload && !(base.debug.GetBrowserInfo.msie && base.debug.GetBrowserInfo.version == "7.0")) base.$el.css("visibility", "hidden");
124 | base.debug.Log("Old Height is " + base.$el.height() + "px");
125 | base.$el.css("height","").removeAttr("height");
126 | base.debug.Log("Reset iframe");
127 | base.debug.Log("Height is " + base.$el.height() + "px after reset");
128 | };
129 |
130 | base.resizeFromOutside = function(event){
131 | if(base.options.blockCrossDomain) {
132 | base.debug.Log("Blocked cross domain fix");
133 | return false;
134 | }
135 |
136 | if(typeof event === "undefined") return false;
137 |
138 | if(typeof event.data == "string") {
139 | if(event.data == "reset") {
140 | base.$el.css("height","").removeAttr("height");
141 | } else {
142 | if(!/^ifh*/.test(event.data)) return false;
143 |
144 | if(typeof parseInt(event.data.substring(3)) != "number") return false;
145 | var frameHeightPx = parseInt(event.data.substring(3)) + parseInt(base.options.heightOffset);
146 |
147 | base.resetIframe();
148 | base.setIframeHeight(frameHeightPx);
149 | }
150 | } else {
151 | return false;
152 | }
153 | return true;
154 | };
155 |
156 | base.checkMessageEvent = function(){ // it works on IE8+, Chrome, Firefox3+, Opera and Safari
157 | if(base.options.blockCrossDomain || (base.debug.GetBrowserInfo.msie && base.debug.GetBrowserInfo.version == "7.0")) {
158 | base.debug.Log("Blocked cross domain fix");
159 | return false;
160 | }
161 | base.resetIframe();
162 | if(base.options.visibilitybeforeload && !(base.debug.GetBrowserInfo.msie && base.debug.GetBrowserInfo.version == "7.0")) base.$el.css("visibility", "visible");
163 |
164 | if (window.addEventListener) {
165 | window.addEventListener('message', base.resizeFromOutside, false);
166 | } else if (window.attachEvent) {
167 | window.attachEvent('onmessage', base.resizeFromOutside);
168 | }
169 |
170 |
171 | if (!base.$el.id) {
172 | base.$el.id = "iframe-id-" + (++uuid);
173 | }
174 | var frame = document.getElementById(base.$el.attr("id"));
175 |
176 | var message = base.options.onMessageFunctionName;
177 | if (frame.contentWindow.postMessage) {
178 | frame.contentWindow.postMessage(message, "*");
179 | }
180 | else {
181 | base.debug.Log("Your browser does not support the postMessage method!");
182 | return false;
183 | }
184 |
185 | base.debug.Log("Cross Domain Iframe started");
186 | return true;
187 | };
188 |
189 | var tryFixIframe = function(){
190 | if($.iframeHeight.resizeCount <= base.options.resizeMaxTry){
191 | $.iframeHeight.resizeCount++;
192 | $.iframeHeight.resizeTimeout = setTimeout($.iframeHeight.resizeIframe, base.options.resizeWaitTime);
193 | base.debug.Log($.iframeHeight.resizeCount + " time(s) tried");
194 | } else {
195 | clearTimeout($.iframeHeight.resizeTimeout);
196 | $.iframeHeight.resizeCount = 0;
197 | base.debug.Log("set default height for iframe");
198 | base.setIframeHeight(base.options.defaultHeight + base.options.heightOffset);
199 | }
200 | };
201 |
202 | base.sendInfotoTop = function(){
203 | if(top.length > 0 && typeof JSON != "undefined"){
204 | var data = {};
205 | data[base.options.externalHeightName].value = $(document).height();
206 |
207 | var domain = '*';
208 | data = JSON.stringify(data);
209 |
210 | top.postMessage(data, domain);
211 | base.debug.Log("sent info to top page");
212 | return false;
213 | }
214 | return true;
215 | };
216 |
217 | base.setIframeHeight = function(_height) {
218 | base.$el.height(_height).css("height", _height);
219 | if(base.$el.data("iframeheight") != _height) base.$container.height(_height).css("height", _height);
220 | if(base.options.visibilitybeforeload && !(base.debug.GetBrowserInfo.msie && base.debug.GetBrowserInfo.version == "7.0")) base.$el.css("visibility", "visible");
221 | base.debug.Log("Now iframe height is " + _height + "px");
222 | base.$el.data("iframeheight", _height);
223 | };
224 |
225 | $.iframeHeight.resizeIframe = function(){
226 | base.resetIframe();
227 |
228 | if(isThisCDI()){
229 | base.$el.height(base.options.defaultHeight + base.options.heightOffset).css("height", base.options.defaultHeight + base.options.heightOffset);
230 | if(base.options.visibilitybeforeload && !(base.debug.GetBrowserInfo.msie && base.debug.GetBrowserInfo.version == "7.0")) base.$el.css("visibility", "visible");
231 | base.checkMessageEvent();
232 | } else {
233 | if(base.$el.css("height") === base.options.minimumHeight+"px") {
234 | base.resetIframe();
235 | }
236 |
237 | if(base.$el.get(0).contentWindow.document.body !== null) {
238 | base.debug.Log("This page has body info");
239 | var _pageHeight = $(base.$el.get(0).contentWindow.document).height();
240 | var _pageName = base.$el.get(0).contentWindow.document.location.pathname.substring(base.$el.get(0).contentWindow.document.location.pathname.lastIndexOf('/') + 1).toLowerCase();
241 |
242 | base.debug.Log("page height : " + _pageHeight + "px || page name : " + _pageName);
243 | if((_pageHeight <= base.options.minimumHeight && base.options.exceptPages.indexOf(_pageName) == -1)) {
244 | tryFixIframe();
245 | } else if (_pageHeight > base.options.minimumHeight && base.options.exceptPages.indexOf(_pageName) == -1) {
246 | base.setIframeHeight(_pageHeight + base.options.heightOffset);
247 | }
248 | } else {
249 | base.debug.Log("This page has not body info");
250 | tryFixIframe();
251 | }
252 | }
253 | };
254 |
255 | this.$el.bind("updateIframe", function() {
256 | $.iframeHeight.resizeIframe();
257 | base.debug.Log("Updated Iframe Manually");
258 | });
259 |
260 | this.$el.bind("killWatcher", function() {
261 | window.clearInterval(base.watcher);
262 | base.debug.Log("Killed Watcher");
263 | });
264 |
265 | base.init = function(){
266 | base.options = $.extend({},$.iframeHeight.defaultOptions, options);
267 | if(base.options.watcher == true) base.options.blockCrossDomain = true;
268 |
269 | base.debug.Log(base.options);
270 |
271 | //noinspection JSValidateTypes
272 | if(base.$el.get(0).tagName === undefined || base.$el.get(0).tagName.toLowerCase() !== "iframe") {
273 | base.debug.Log("This element is not iframe!");
274 | return false;
275 | }
276 |
277 | $.iframeHeight.resizeIframe();
278 | base.$el.on('load', function () {
279 | $.iframeHeight.resizeIframe();
280 | });
281 |
282 | if(base.options.watcher) {
283 | base.watcher = setInterval(function(){
284 | $.iframeHeight.resizeIframe();
285 | base.debug.Log("Checked Iframe");
286 | }, base.options.watcherTime);
287 | }
288 |
289 | return true;
290 | };
291 |
292 | base.init();
293 | };
294 |
295 | $.iframeHeight.defaultOptions = iframeOptions;
296 |
297 | $.fn.iframeHeight = function(options){
298 | return this.each(function(){
299 | (new $.iframeHeight(this, options));
300 | });
301 | };
302 |
303 | $.iframeHeightExternal = function (){
304 | if(arguments.length === 1) {
305 | if($.isPlainObject(arguments[0])) {
306 | iframeOptions = $.extend({}, $.iframeHeight.defaultOptions, arguments[0]);
307 | }
308 | }
309 |
310 | if (window.addEventListener) {
311 | window.addEventListener ("message", OnMessage, false);
312 | }
313 | else if (window.attachEvent) {
314 | window.attachEvent("onmessage", OnMessage);
315 | }
316 |
317 | function OnMessage (event){
318 | var _domain;
319 | if ('domain' in event) {
320 | _domain = event.domain;
321 | }
322 | if ('origin' in event) {
323 | _domain = event.origin;
324 | }
325 |
326 | if(iframeOptions.domainName !== "*") {
327 | if(_domain !== iframeOptions.domainName) {
328 | $.iframeHeight.debug.Log("It's not same domain. Blocked!");
329 | return;
330 | }
331 | }
332 |
333 | if (event.data == iframeOptions.onMessageFunctionName) {
334 | var message = "ifh" + $(document).height();
335 | event.source.postMessage(message, event.origin);
336 | }
337 | }
338 |
339 | return {
340 | update : function() {
341 | this.reset();
342 | window.__domainname = iframeOptions.domainName;
343 | setTimeout(function(){
344 | var message = "ifh" + $(document).height();
345 | parent.postMessage(message, window.__domainname);
346 | }, 90);
347 | },
348 | reset : function() {
349 | parent.postMessage("reset", iframeOptions.domainName);
350 | }
351 | };
352 | };
353 | })(jQuery);
354 |
--------------------------------------------------------------------------------