Wednesday, September 9, 2009

Dynamic Height of iframe Javascript

Set the Height of iframe Dynamically..

1] If iframe Source from same domain

Here is the Code Used for to set the Height of iFrame Using Javascript.
this code is working if source of iframe is from same domain.
same domain means the script execution page and iframe page source from same hosting server.

function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight+'px';
}

and on iframe onload="resizeFrame(this)"

1] If iframe Source from different domain

// FrameManager.js -- Must be added in Hosting window
var FrameManager =
{
currentFrameId : '',
currentFrameHeight : 0,
lastFrameId : '',
lastFrameHeight : 0,
resizeTimerId : null,

init : function()
{
if (FrameManager.resizeTimerId == null)
{
FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);
}
},

resizeFrames : function()
{
FrameManager.retrieveFrameIdAndHeight();

if ((FrameManager.currentFrameId != FrameManager.lastFrameId) ||
(FrameManager.currentFrameHeight != FrameManager.lastFrameHeight))
{
var iframe = document.getElementById(FrameManager.currentFrameId.toString());

if (iframe == null) return;

iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";

FrameManager.lastFrameId = FrameManager.currentFrameId;
FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
window.location.hash = '#';
}
},

retrieveFrameIdAndHeight : function()
{
if (window.location.hash.length == 0) return;

var hashValue = window.location.hash.substring(1);

if ((hashValue == null) || (hashValue.length == 0)) return;

var pairs = hashValue.split('&');

if ((pairs != null) && (pairs.length > 0))
{
for(var i = 0; i < style="color: rgb(0, 0, 255);">var pair = pairs[i].split('=');

if ((pair != null) && (pair.length > 0))
{
if (pair[0] == 'frameId')
{
if ((pair[1] != null) && (pair[1].length > 0))
{
FrameManager.currentFrameId = pair[1];
}
}
else if (pair[0] == 'height')
{
var height = parseInt(pair[1]);

if (!isNaN(height))
{
FrameManager.currentFrameHeight = height;
FrameManager.currentFrameHeight += 15;
}
}
}
}
}
},

registerFrame : function(frame)
{
var currentLocation = location.href;
var hashIndex = currentLocation.indexOf('#');

if (hashIndex > -1)
{
currentLocation = currentLocation.substring(0, hashIndex);
}

frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;
}
};

window.setTimeout(FrameManager.init, 300);


// Host.html-Where the Target iframe resides
iframe id="ifrSample1" scrolling="no" frameborder="0" src="Frame.html" style="margin:0px;width:330px;height:100px" onload="FrameManager.registerFrame(this)"


// Frame.js -- Must be added in iframe window
function publishHeight()
{
if (window.location.hash.length == 0) return;

var frameId = getFrameId();

if (frameId == '') return;

var actualHeight = getBodyHeight();
var currentHeight = getViewPortHeight();

if (Math.abs(actualHeight - currentHeight) > 15)
{
var hostUrl = window.location.hash.substring(1);

hostUrl += "#";
hostUrl += 'frameId=' + frameId;
hostUrl += '&';
hostUrl += 'height=' + actualHeight.toString();

window.top.location = hostUrl;
}
}

function getFrameId()
{
var qs = parseQueryString(window.location.href);
var frameId = qs["frameId"];

var hashIndex = frameId.indexOf('#');

if (hashIndex > -1)
{
frameId = frameId.substring(0, hashIndex);
}

return frameId;
}

function getBodyHeight()
{
var height;
var scrollHeight;
var offsetHeight;

if (document.height)
{
height = document.height;
}
else if (document.body)
{
if (document.body.scrollHeight)
{
height = scrollHeight = document.body.scrollHeight;
}
if (document.body.offsetHeight)
{
height = offsetHeight = document.body.offsetHeight;
}

if (scrollHeight && offsetHeight)
{
height = Math.max(scrollHeight, offsetHeight);
}
}

return height;
}

function getViewPortHeight()
{
var height = 0;

if (window.innerHeight)
{
height = window.innerHeight - 18;
}
else if ((document.documentElement) && (document.documentElement.clientHeight))
{
height = document.documentElement.clientHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
height = document.body.clientHeight;
}

return height;
}

function parseQueryString(url)
{
url = new String(url);
var queryStringValues = new Object();
var querystring = url.substring(url.indexOf('frameId') , url.length);
var querystringSplit = querystring.split('&');

for (i = 0; i < style="color: rgb(0, 0, 255);">var pair = querystringSplit[i].split('=');
var name = pair[0];
var value = pair[1];

queryStringValues[name] = value;
}

return queryStringValues;
}

// Frame.html-Will reside in another domain
script type="text/javascript" src="Frame.js" script
window.onload = function(event)
{
window.setInterval(publishHeight, 300);
}

Please note That i got above code from google search...........and i remove the two bugs from that....and it is working fine............

if have any problem let me know.............vish.ideal@gmail.com
Thanks,
Vishnu

Tuesday, September 1, 2009

URL Rewriting Using .htacess file

URL Rewriting Using .htacess file
Our Aim is to
http://www.example.com/test/blog/var1/testFile.html
into dynamic URL
http://www.example.com/test/testFile.php?var1=var1&var2=testFile
using .htacess file


Create .htacess file in test directory

Now you directory structure is
www.example.com/test/
.htacess
testFile.php

In .htacess file write the code
Options +FollowSymlinks
RewriteEngine On
RewriteRule ^blog/([^/]+)/([^/]+)\.html$ /test/testFile.php?var1=$1&var1=$2 [QSA]

Now in testFile.php your code will be there
If you type URL in Browser
http://www.example.com/test/blog /var1/testFile.html

it will execute on server as
http://www.example.com/test/testFile.php?var1=var1&var2=testFile

if you want todo external redirecting the just change the .htacess code
Options +FollowSymlinks
RewriteEngine On
RewriteRule ^blog/([^/]+)/([^/]+)\.html$ /test/testFile.php?var1=$1&var1=$2 [R=301,L]