Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
The JavaScript Blog js:   Followers: 3 ; Following: 3

Explore The JavaScript Blog's photo albums:
Photos from posts (7)
Javascript tools (2)

Data URL


Use Data URL to create a page content like an external file but without loading any external page or file.

The example below will create this element inside the page:
<link rel="stylesheet" href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQ6IHJlZDsgfQ==">
The "data" information is a Base64 encoded string that contains 'body { background: red; }' , and will redefine the body background color to red.

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'data:text/css;base64,' +
window.btoa('body { background: red; }');

document.head.appendChild(link);


Samples:
* Simple text editor programmed in the url only (will not load external page): url text editor using "data:"
This sample creates dynamically a web page with a simple, light and fast text editor, without loading any page. Everything is in the url.
Source content of the url (you can copy and paste this to the browser's url to render the page):
data:text/html,<textarea style='font:22pt Courier;outline:none;padding:12px;height:40%;width:80%;border:2px solid gray;border-radius:6px' placeholder='Type here...'></textarea>

If you want a more complete simple online text editor, try msg.do

More about Data URL, from the presentation HTML5 Showcase for Web Developers at #io2011:
http://www.htmlfivewow.com/slide24

 

Post by The JavaScript Blog (2012-06-21 14:17)

Post your comment:

Name: Email: Site:




| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2017 - postbit.com