• Stars
    star
    169
  • Rank 224,453 (Top 5 %)
  • Language
    HTML
  • Created over 12 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This plugin can get contents of iframe and set height of iframe automatically. Also it has cross-domain fix (*).

Iframe Height Jquery Plugin

(Version 1.2.5) - 09.10.2013

This plugin can get contents of iframe and set height of iframe automatically. Also it has cross-domain fix (* You should read tutorial below).

Uncompressed Version : 13.8KB (2.69KB gzipped) Compressed Version : 6.28KB (2KB gzipped)

Usage


  • include the latest version jquery in your page
  • include the latest version iframe height plugin
  • use .iframeHeight() to iframe that you want to fix
  • use $.iframeHeightExternal() to send external page height to iframe
  • also you can install this plugin using Jam.js or Bower (plugin name : iframe-auto-height-jquery-plugin)

Examples


Basic Usage :

$(document).ready(function(){
    $('#autoIframe').iframeHeight();
});

or

$(document).ready(function(){
    $.iframeHeight('#autoIframe');
});

Debug Mode Usage :

$('#autoIframe').iframeHeight({
	debugMode : true
});

Full Options Usage :

$('#autoIframe').iframeHeight({
	resizeMaxTry         : 2,
	resizeWaitTime       : 300,
	minimumHeight        : 100,
	defaultHeight        : 500,
	heightOffset         : 90,
	exceptPages          : "",
	debugMode            : false,
	visibilitybeforeload : true,
	blockCrossDomain     : true,
	externalHeightName   : "bodyHeight",
    onMessageFunctionName: "getHeight",
    domainName           : "*",
    watcher              : false,
    watcherTime          : 400
});

Options


  • resizeMaxTry : how many try that find true values (default : 4 Times)
  • resizeWaitTime : wait time before next try (default : 50ms)
  • minimumHeight : minimum height for iframe (default : 200px)
  • defaultHeight : default height for iframe (default: 1000px)
  • heightOffset : default top offset for iframe (default : 0px)
  • exceptPages : Pages that doesnt need auto height (default : "")
  • debugMode : Debug Mode (default : false)
  • visibilitybeforeload : If you change this to true, iframe will be invisible when every iframe load (default : false)
  • blockCrossDomain : Set true if you dont want use cross domain fix (default : false)
  • externalHeightName : Height data name that comes from postMessage (CDI) and gives height value
  • onMessageFunctionName : Function name that plugin calls this to get data from external source
  • domainName : Set this if you want to get data from specific domain
  • watcher : Set true if you want to watch iframe document changes automatically (default : false)
  • watcherTime : Watcher Control Time (default : 400ms)

Functions


These are triggers for iframe so You can use these like "$('#iframe').trigger("FUNCTIONNAMES");"

  • updateIframe : Trigger to Update Iframe Height Manually
  • killWatcher : Kill Watcher to stop to update iframe automatically

Details


  • iframeheight.js is development version. iframeheight.min.js is produce version (minified).
  • When you use it for cross domain fix, You must use postMessage function on page in iframe. (Click Here or Click Here for Details). Tutorial is below
  • You shouldn't use it on local because it doesnt work correctly in chrome (chrome gives cross domain error on local)
  • Cross-Domain and Watcher cannot work together. If you want to enable watcher, you cannot use crossdomain fix.

Demos


You can see files inside of Demos Folder.


Change Log


Version 1.2.5 (09.10.2013) :

  • Fixed IE8 postMessage issue (Thanks to Lincetto)
  • Fixed setTimeout call when jQuery is in noConflict mode (Thanks to Thibaud Colas)
  • Fixed Iframe Location (Thanks to James75)
  • Fixed Watcher Update Flick
  • Added Contributors & TODO List sections to readme file

Version 1.2.4 (12.09.2013) :

  • Now you can trigger update from external page (Crossdomain)
  • Added Cross Domain Click Trigger Demo
  • Fixed container height setter

Version 1.2.3 (18.08.2013) :

  • Cross domain & Watcher control added
  • Cross domain number control fixed
  • Watcher scroll problem fixed

Version 1.2.2 (12.08.2013) :

  • Added Watcher! Now plugin can control iframe height automatically.
  • Added 2 Trigger: updateIframe & killWatcher (Look "Functions" Title for Details)
  • Added Watcher Demo Page
  • Added Github Tags
  • Fixed ID Problem (Thanks to Thibaud Colas)

Version 1.2.1 (20.04.2013) :

  • Fixed Cross-domain check for Internet explorer 7
  • Changed ScrollHeight() to Jquery's Height() (Thanks to archiechen)

Version 1.2.0 (20.02.2013) :

  • Jquery 1.9.x compatible now
  • Cross Domain Demo added
  • Cross Domain Tutorial added (look below)
  • Added 2 options (onMessageFunctionName, DomainName)
  • Completely Updated Cross-domain fix (It tested on Chrome, Firefox, IE9, IE8)
  • Added External Function ($.iframeHeightExternal())

Version 1.1.0 (27.08.2012) :

Version 1.0.0 (21.06.2012) :

  • Files uploaded to Github

Author


Ilker Guller (http://ilkerguller.com)


Contributors



TODO List


  • Works with two or more iframes
  • Decrease memory uses

For Issues, New Features, Grammar problems :)


If you find issues or you want to add new features, feel free to post them to the 'Issues' tab.


License


MIT License

Copyright (c) 2012 İlker Güller

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.

GPL License

Copyright (c) 2012 İlker Güller

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.


Cross Domain Tutorial


You can test it after upload "crossdomain_inpage.html" file (its in demos folder) to external server.

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

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;

when using it in your base website

$('#autoIframe').iframeHeight({
	debugMode : true,
	minimumHeight: 450,
	onMessageFunctionName: "dummyFunc"
});

then set it in your external site

$.iframeHeightExternal({
	debugMode : true,
	minimumHeight: 450,
	onMessageFunctionName: "dummyFunc"
});

If you want to trigger from any element to update iframe

var iframeExt = $.iframeHeightExternal({
	debugMode : true,
	minimumHeight: 450,
	onMessageFunctionName: "dummyFunc"
});
$('button').on("click", function(){ iframeExt.update(); });

More Repositories

1

ran

âš¡ RAN! React . GraphQL . Next.js Toolkit âš¡ - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...
JavaScript
2,213
star
2

Jquery-Alpha-Image

This plugin can change selected colours to transparent and give result as image or imagedata. This plugin works IE9+, Chrome, Firefox, Safari.
JavaScript
53
star
3

Chat-Tutorial-with-Node.js--Socket.io-and-Express

This is sample project to show how to create chat system with Node.js, Socket.io and Express.
JavaScript
38
star
4

hayde

Open Source Component-Driven Code Generator; It supports OpenAI, Ollama, ChakraUI, MaterialUI, BuilderIO, and more.
TypeScript
21
star
5

phoenix-docker

A Docker container for the Phoenix framework
14
star
6

Asp.net-Advanced-Captcha

Secure, Customizable Captcha for ASP.NET C#
C#
9
star
7

prepare-your-machine

Helping preparation of your local env for development on First Time
Shell
8
star
8

FallingInLove

Falling in Love - Valentine Day Flappy Bird Clone with HTML5 & JS
JavaScript
7
star
9

Multiplayer-Canvas-Paint-tutorial-with-Node.js-Socket.io-and-Node-Static

Multiplayer Canvas Paint tutorial with Node.js, Socket.io and Node-Static. http://blog.ilkerguller.com
JavaScript
6
star
10

MovyJS

Users can control your website with their mouse move (or touch move) now! Use preset moves or create your move. This plugin works on IE8+, Chrome, Firefox, Safari and also on safari mobile and android mobile.
JavaScript
5
star
11

NewsReaders

created for learn & try new libraries when todo apps are not enough
CSS
3
star
12

React-UI-Debugger

React Render Debugger on UI (with React Perf tools)
JavaScript
3
star
13

C2DM-Android-Sample-w-Phonegap-UA

C2DM Android App with Phonegap and Urban Airship
JavaScript
3
star
14

Basic-Css-Reset

Basic Css Reset
2
star
15

Minimalistbox

Minimalistbox - Minimalist Select List Boxes Jquery Plugin
CSS
2
star
16

SP-and-DB-Functions

For use this to use database functions easily (like use SP, only Text or Basic Actions)
C#
1
star
17

pr_title_jira_linker

Linking JIRA Issue ID to PR title - Github Action
TypeScript
1
star
18

presentations

Ilker Guller Presentations
JavaScript
1
star
19

fly

Fly - Hugo Theme
CSS
1
star
20

nextjs-workshop

Next.JS Workshop - https://www.meetup.com/Frontend-Istanbul/events/245815765
JavaScript
1
star
21

RSS-reader-list-for-developers

RSS reader list for developers
1
star