- HTML5 introduced web workers to support JavaScript multi-threading.
- Web workers run on a separate thread in parallel to browser's UI thread.
- Web workers can only access limited objects such as functions, and objects like strings, numbers, Date, Array, XMLHttpRequest, etc.
- The worker and the parent page communicate using messaging. Each can add a listener to the onmessage() event to receive messages from the other.
- Read more from this article written by Robert Gravelle and from this article written by Eric Bidelman.
Saturday, April 16, 2016
Web workers
Give it five minutes
Did you learn anything today? You might have learnt something that is good or bad, useful or useless, or learnt some stuff that could help you in your day to day job. Today I came across this wonderful article written by Jason Fried who talked about giving some time to think about something instead of immediately pushing it back. Read this article to understand what that means!
Sunday, April 3, 2016
HTML5 template tag. - And also the script tag with type as text/template.
MDN Definition of template tag says The HTML template tag <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but subsequently be instantiated during runtime using JavaScript.
Read from this blog, http://www.html5rocks.com/en/tutorials/webcomponents/template/, on how to use and access the template tag contents.
Also the script tag with type as text/template works the same way:
By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets.
Read from this blog, http://www.html5rocks.com/en/tutorials/webcomponents/template/, on how to use and access the template tag contents.
Also the script tag with type as text/template works the same way:
By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets.
<!doctype html>
<head>
<head>
<script>
window.onload=function(){
document.getElementById('targetDiv').innerHTML = document.getElementById('hiddenTemplate').textContent;
};
</script>
</head>
<body>
<script id="hiddenTemplate" type="text/template"></script>
<div id="targetDiv"></div>
</body>
</html>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"></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>
Subscribe to:
Posts (Atom)