<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
<mx:Script>
//actionscript 3
import flash.display.Sprite;
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init : void(){
var cookies : Object = getCookies();
Alert.show(cookies.sid);//alert sid cookie assuming its called sid
}
private function getCookies() : Object{
//THIS IS IT RIGHT HERE
var str : String = ExternalInterface.call("(function(){return window.document.cookie||'';})");
var parts : Array = str.split(';')
var out : Object = new Object();
var num_index : int = 0;
for(var i : String in parts){
var kv : Array = parts[i].split('=');
if(kv.length){
var key : String = trim(kv[0]);
if(kv.length > 1){
var val : String = trim(kv[1]);
out[key] = val;
} else {
out[num_index] = key;
num_index++;
}
}
}
return out;
}
public function trim(str:String) :String{
return str.replace(/^\s+|\s+$/g,'');
}
</mx:Script>
</mx:Application>
GOAL: i want to send a message to a child x-domain iframe, demonstrate that the message was recieved, and then have the child send a new message to the parent window.
I was browsing around the dom and noticed window.postMessage. I remembered hearing about this before, and after reading a few blogs about web workers i realized that this is the HTML5 postMessage used for cross domain communication between window objects (ie: iframes) and now web workers.
<script>
//see script below
</script>
<div style="padding:10px;background:orange;">
i am frame 1
<div id="test"></div>
</div>
window.onload = function(){
var parentWin = window.parent;
window.addEventListener("message", function(e){
document.getElementById("test").textContent = e.origin + " said: " + e.data;
parentWin.postMessage("hey man i heard you say: "+e.data,e.origin);
}, false);
}
Main frame contents:
<div id="main">
I AM in the main page
<div id="main-msg"></div>
</div>
<iframe id="iframe" src="http://wobblypirate.com/frame1.php"></iframe>
<form id='form'>
<input type="text" id="msg" value=""/><input type="submit" value="submit"/>
</form>
window.onload = function(){
var frame = document.getElementById("iframe");
var win = frame.contentWindow;
document.getElementById("form").onsubmit = function(e){
try{
win.postMessage(document.getElementById("msg").value,frame.src);
}catch(ex){
console.log(ex);
}
e.preventDefault();
};
};
window.addEventListener("message", function(e){
document.getElementById("main-msg").textContent = e.origin + " said: " + e.data;
}, false);
var json = [{food:'taco',type:'cold'},{food:'chicken',type:'grilled'},{food:'beef',type:'roast'}];
$("#results").JSONTemplate(".food-template",json);
You just have to make a hidden template on the page and add a class to every container you want to innerHTML replace with json contents. class="field-keyInJsonResponse"
<!DOCTYPE HTML>
<html>
<head>
<title>quick and fast templating with jQuery</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.jsontemplate.js?<?=time()?>"></script>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<div id="results"></div>
<div style="display:none;">
<div class="food-template">
<b class="field-type"></b> <span class="field-food"></span>
</div>
</div>
</body>
</html>
var testArray = ['a','b','c'];
console.log(testArray.length)// prints 3 to firebugs console
delete testArray[0];
console.log(testArray.length)// prints 3 to firebugs console
var newArray = [];
for(var i in testArray){//i magically ignore the undefined zeroth value
newArray[newArray.length] = testArray[i];
}
testArray = newArray;
console.log(testArray.length)// prints 2 to firebugs console
Object.prototype.ninjas = function(){alert('boats!')};
Array.prototype.boats = function(){alert('boats!')};
for(i in Array.prototype){
if(Array.prototype.hasOwnProperty(i)){
console.log(i+' is a user defined property',Array.prototype[i]);
} else {
console.log(i+' is an inherited user defined property')
}
};
me on GitHub