Diary of a Developer

Sunday, April 3, 2016

HTML5 window.postMessage - communication between windows/frames hosted on different domains

window.postMessage allows safe communication between windows/frames hosted on different domains.

Concept is simple: Post a message from one window (origin) or another window (target) and check for any message received in the target window.

An example:

<!doctype html>
<html>
<head>

<script>
window.onload=function(){

    var iframeNode = document.getElementById("iframe");
    var iframe = iframeNode.contentWindow;
    iframe.document.body.innerHTML = document.getElementById('hiddenTemplate').textContent;

    var parentButtonNode = document.getElementById("postMsgBtn");
    var childButtonNode = iframe.document.getElementById("postMsgBtn");
    
    //  Post a message from main window to the iframe
    parentButtonNode.addEventListener('click',function(){
        iframe.postMessage(document.getElementById("mailbox").value, "http://localhost");       
    });

    //  Post a message from iframe to the main window
    childButtonNode.addEventListener('click',function(){
        iframe.parent.postMessage(iframe.document.getElementById("mailbox").value, "http://localhost");       
    });

    //  Check in main window if you received a message from iframe
    window.addEventListener('message', function(event) {
        if (event.origin !== "http://localhost"){
            return;
        }
        document.getElementById("msg").innerHTML = "Received this from iframe<span style='color:red;'>: " + event.data + "</span>";
    });

    //  Check in iframe if you received a message from main window
    iframe.addEventListener('message', function(event) {
        if (event.origin !== "http://localhost"){
            return;
        }
        var msgNode = iframe.document.getElementById("msg");
        msgNode.innerHTML = "Received this from main window<span style='color:red;'>: " + event.data + "</span>";
    });
}
</script>
</head>
<body>

<!-- hidden HTML template that will be used inside iframe -->
<script id="hiddenTemplate" type="text/template">
    Type something: <input type="text" id="mailbox" />
    <button id="postMsgBtn">Send this message to main window</button>
    <div id="msg"></div>
</script>

<!-- iframe and it's content -->
<iframe id="iframe" src="about:blank" width="600px"></iframe>

<!-- Main page content -->
Type something: <input type="text" id="mailbox" />
<button id="postMsgBtn">Send this message to iframe</button>
<div id="msg"></div>

</body>
</html>

References:

http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

http://jsfiddle.net/phusick/H7Zh8/

Sunday, March 13, 2016

Dojo define() Vs require()

This is the simplest explanation that I come across that explained the differences between dojo define() and require(){

http://g00glen00b.be/dojo-require-vs-define/

Tuesday, March 1, 2016

I come across the following site where it was explained in simple about node, node custom modules, making database connection from a node module, etc. A must read...

http://code.tutsplus.com/tutorials/nodejs-for-beginners--net-26314

Monday, February 29, 2016

NodeJS and PhoneGap

Phonegap is a client-side solution only with JavaScript/CSS/HTML running on the browser-app of the phone. The JavaScript Phonegap API talks to the native phone interface and browser interface which gives you options to work natively and as a normal web page would with enhanced permissions. Node.js would only serve you as a data connection for JSON or whatever else you would need to pull/push with a network call.

Reference: http://stackoverflow.com/questions/14513029/phonegap-with-node-js

Wednesday, February 3, 2016

CSS: Elements do not expand to contain floated children by default

Elements do not expand to contain floated children by default.

There are a number of workarounds, such as floating the parent, using a clearfix or adding overflow: hidden to the parent.

Saturday, January 30, 2016

Fetch multiple rows using PHP, MySQL

<?php

$dbc = mysqli_connect("localhost", "my_user", "my_password", "my_database") or die ("Error connecting to the mysql server. ");

$query = "select * from my_table";

$result = mysqli_query($dbc, $query)or die ("Could not connect to mysql server. ");

$myArray = array();

while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {

$myArray[] = $row;

}

$result->free();

mysqli_close($dbc);

//TEST TO SEE THE RESULT OF THE ARRAY

echo '<pre>';

print_r($myArray);

echo '</pre>';

Sunday, November 22, 2015

A simple PHP insert code

<?php
if ($_SERVER["REQUEST_METHOD"] == 'POST'){

$firstname = $_POST["firstname"];

$dbc = mysqli_connect('localhost','root','','mydatabase') or die ("connection Error");

$query = "insert into my_table(firstname) values('$firstname')";

$myArray = array();

if (mysqli_query($dbc, $query)){
$myArray["msg"] = "happened";
}else {
$myArray["msg"] = "notHappened". mysqli_error($dbc);
}
mysqli_close($dbc);

echo json_encode($myArray);
}

?>

Note: Use your own database name in place of mydatabase and table name where my_table is specified.