Hey!
First of all I want to say that I am not JS programmer, so my code style or some methods using could be urgly :)
So, I just found the way how to do this :)
In Freecause(http://freecause.com) we needed to make a forum with cross-social networks support ability.
We decided to make it based on iframes, cause then it'll be simplier to implement :)
While developing we got one prob.. the auto-height of iframe,... When you have all files on one domain - its not a prob,..
but if files are from different domain - then you get cross-domain security problems.
There is one method that works ok. Its needed to use few iframes (3 frames from main domain and 1 from the domain of your app).
But Facebook has its own libs for implementing this(check docs here: http://wiki.developers.facebook.com/index.php/Resizable_IFrame) and it was very useful to run auto-height iframes for facebook applications(check it on PinkRibbon application here: http://apps.facebook.com/pinkribbon/ - Discussion tab).
As all know Myspace API and myspace apps are not the same as in Facebook. Myspace uses v0.7 of Google Opensocial. And as its Google gadget technology - all is based on JS reloads of the pages.
So You cant just write http://some.myspace.app.com/some_file.html for Myspace. All page reloads are being done throught makerequest JS function.
Another method is to use iframes. BUT, there is one problem - there is no special API for resizing your iframes. And of course cross-domain policy of javascript doesnt allow you to use the 4-frames auto-height :)
In Myspace forums its possible to find a lot of questions on this. There is one method to use makerequest and proxy your page throught myspace,.. but only once..
So, we found the method to make resizable iframe applications for Myspace.
You can check its working on PinkRibbon Myspace application - Discussion tab(add it from here: http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=417866306)
Ok,.. so returning to main stuff - method to resize iframes in myspace applications.
I'll try to explain it based on example.
You'll be needed to have one conf for your myspace app. And also 2 files on any host for proxiing (I think they should be from same host, but its connected with myspace proxy and opensocial keys, so I can be wrong).
Lets call them "srv_receiver.htm" and "frame.html".
So, first of all - you're needed to have this myspace app source:
<div id="app_body" style="display: none;">
<iframe id="ifframe" name="ifframe" width="646" resizable="true" frameborder="0" scrolling="no" allowtransparency="true" style="border: none; background:transparent;"></iframe>
</div>
<script type="text/javascript">
os = opensocial.Container.get();
dataReqObj = os.newDataRequest();
var viewerReq = os.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER);
dataReqObj.add(viewerReq, 'viewer');
dataReqObj.send(viewerResponse);
function viewerResponse(data) {
var viewer = data.get('viewer').getData();
var userID = viewer.getId();
var app_id = myOpenSocialAppOpts.ID;
var check_url = "http://yourhost.com/pathto/frame.html";
opensocial.Container.get().makeRequest( check_url,
function(content, url, error)
{
//loading your app into "ifframe" iframe and sending some params if needed
document.getElementById("ifframe").src = url+"#init;someparam=somevalue&someparam2=somevalue2;
});
document.getElementById("app_body").style.display = "block";
var height = document.getElementById("app_body").offsetHeight + 100;
if (500 > height) {
height = 500;
}
opensocial.Container.get().resizePanel(height);
//initial height setting
var height=500;
function checkForMessages(){
try{
//if height is not changed - do nothing
if(ifframe.data != height){
//getting the real height from your application
height = ifframe.data;
//and if its less then minimal height - set height to minimal height. I used 500 for example.
if(height<500){
height = 500;
}
document.getElementById("ifframe").height = height;
//after setting the right height for our main iframe, we're fixing the canvas height by MySpace API command :)
opensocial.Container.get().resizePanel(height);
}
}
catch(e){}
}
//We're trying to check height change every 200 msecs
setInterval(checkForMessages, 200);
}
</script>
In few words, we're loading the "frame.html" page which allows us to hide hash params that are sent from your real app (real height).
"frame.html" enables communicating between your main app frame and you real app (throught additional "srv_receiver.html"). "init" in "ifframe" source path is just a hash param that says to frame.html to make some action.
In this case it just loads your app.
So,.. "frame.html" now :
<html>
<head>
<title>test</title>
</head>
<body>
<div id="mydiv2"></div>
<iframe id="fframe" name="fframe" width="646" resizable="true" frameborder="0" scrolling="no" allowtransparency="true" style="border: none; background:transparent;"></iframe>
<script type="text/javascript">
var data ="";
var b = "";
var temp = new Array();
function checkForMessages(){
//checking if hash param is changed
if (location.hash != b){
b = location.hash;
temp = new Array();
//splitting command (like "init") and data
temp = decodeURIComponent(location.hash.substring(1)).split(';');
if(temp[0] == 'init'){
//executing init command
var loc = location.search;
//getting opensocial key for correct loading of the last file we're needed to use in our app ("srv_receiver.htm")
var re = /opensocial_token=(.*?)\&/;
loc.match(re);
var session2 = RegExp.$1;
//setting needed params for your application + getting them from string that was sent from init command
temp[1] = temp[1] + '&opensocial_token='+session2;
document.getElementById('fframe').src='http://yourhost.com/some.cgi?'+temp[1];
}
else if(temp[0] == 'change_height'){
//executing resizing from params sent from your application throught "srv_receiver.htm"
// + checking if height of your app is changed
if(temp[1] != data){
data = temp[1];
ReceiveDataFromCl(data);
}
}
}
}
//this function resizes the height of "fframe" - iframe of your real application
function ReceiveDataFromCl(data){
if (data<500){
document.getElementById("fframe").height = 500;
}
else{
document.getElementById("fframe").height = data;
}
}
//checking for command every 200 msecs
setInterval(checkForMessages, 200);
</script>
</body>
</html>
This was your main communication file which was proxied throught myspace via makerequest, so it should have no probs with cross-domain security.
I hope I commented the code right, so you should have no probs with applying it for your application.
And the last one file - "srv_receiver.htm":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>cross domain receiver page</title>
<script type="text/javascript">
function load() {
data = window.location.hash;
document.write(data);
var href = window.parent.parent.location.href;
href = href.replace(/#.*$/,'');
window.parent.parent.location =href+data;
}
</script>
</head>
<body onload="load()">
</body>
</html>
This file should be used as is, as its working with your "frame.html" domain :)
The main stuff you should do in your app is something like this:
<div id="mydiv" style="visibility:hidden"></div>
<script type="text/javascript">
if(self != top){
var actualHeight = "";
//set here the right path to your "srv_receiver.htm" (in the end of line) and opensocial token from frame.html (sent as param)
var par = 'http://api.msappspace.com/proxy/relay.proxy?opensocial_token=OPENSOCIAL_TOKEN_HERE&opensocial_url=http%3A//yourhost.com/pathto/srv_receiver.htm';
//jquery stuff that runs in the end of loading of the page
$(window).load(function(){
//creating the hidden iframe for communication
var iframe = document.createElement('iframe');
iframe.setAttribute('src', par);
iframe.setAttribute('id', 'iframe4');
iframe.setAttribute('name', 'iframe4');
document.getElementById("mydiv").appendChild(iframe);
//getting height of your app
actualHeight = $('body').height();
//sending height to main window throught the "frame.html"
SendDataToSrv('change_height;'+actualHeight);
});
//function that does communication
function SendDataToSrv(data){
document.getElementById('iframe4').src = par+"#"+data;
}
}
I used jquery for getting the real height of the application.
Of course you can use any other method.
Maybe I needed to make all more detaily explained, but I did as I could in 5 a.m. ;)
If I explained all correctly and you understand all - you should have no probs with resizing of iframes for your applications in myspace :)
