Set and get the full HTML content of an iframe
I’m currently working on a chapter for HTML5 in Action that covers rich-text editing using the contentEditable and designMode features of HTML5. The sample application for this chapter is a web-based HTML editor app, and it allows you to quickly switch between a WYSIWYG (What You See Is What You Get) rich-text editing view and a HTML syntax editing view. In building the sample app, I ran into a few problems along the way.
Firstly, I tried using a standard <div> element, making it editable by setting contentEditable=”true” on it. While this worked fine for HTML snippets, it completely destroyed any full HTML documents that I loaded into the application. So if you loaded a HTML document with a root <html> element, all of this would be removed anytime you edited the document in the rich text editor.
To fix this, I changed the element from a <div> to an <iframe>. This immediately raised a few new challenges. Firstly, changing the content of an iframe using JavaScript isn’t as simple as using document.getElementById and innerHTML, like it was with the regular <div>. Instead, we need to get the contentDocument of the iframe as follows:
var iframeDoc = document.getElementById('iframeEl').contentDocument;
Of course, this doesn’t work in IE, so to provide a workaround for that:
var iframeEl = document.getElementById('iframeEl'),
iframeDoc = iframeEl.contentWindow || document.frames['iframeEl'].document;
The next issue is that this does not have an innerHTML property that we can set to update the content. You could use DOM API methods to manually create the document programmatically, but in my case I needed to simply set it to the value of a big string of HTML. To do this, you can use the following code:
var content = 'HTML content goes here'; iframeDoc.open(); iframeDoc.write(content); iframeDoc.close();
That wasn’t so bad. But what about getting the contents of the iframe? Well, I’ve seen plenty of sites tell you to use something like:
var html = iframeDoc.body.innerHTML;
This is fine for snippets, but if you are working with HTML documents that have a doctype and root <html> elements and <head> sections, these will all be missing. After rummaging through the DOM inspector to try and find a property that included the entire HTML markup, I eventually gave up and took my search to the Web. Before too long, I found the answer on Stack Overflow. It’s hardly an obvious solution, as I’m sure you’ll agree:
var html = XMLSerializer().serializeToString(iframeDoc);
This preserves everything in the document, including any doctype declaration and the head section of the HTML markup.
I haven’t tested this in older browsers, but it worked for me on Chrome 17, Firefox 11, Safari 5.1, Opera 11.51 and IE 9. In fact, I’m pretty sure XMLSerializer was newly introduced in IE9, so if you have a workaround for older versions of IE or any other browsers, please leave a comment.
iOS Scroll To Top in Sencha Touch 2 Lists
Ever wish you could scroll to the top of a Sencha Touch list by tapping on the clock in iOS, like you can with native applications? Me too. Unfortunately, I haven’t found a way to get around this limitation (if you know of one, please let me know!), but I have come up with an alternative solution you can use if your app has a titlebar. Basically it attaches an event to the text element in the titlebar which will scroll your view to the top. This is a nice workaround, as often when a user taps the clock in iOS, they also tap the titlebar due to the size of their thumbs.
The following code requires Sencha Touch 2.
listeners: {
initialize: function(c, o) {
c.titleComponent.innerElement.on('tap', function() {
Ext.ComponentQuery.query('#myList')[0].getScrollable().getScroller().scrollTo(0,0,true);
});
}
}
The above code should be added to your titlebar component, and you should give the list (or other container) you want to scroll an ID – in the example above I’ve used the ID myList. The third argument in the scrollTo function specifies whether the scrolling should be animated or not – it is false by default
Announcing HTML5 in Action
I am currently co-authoring my second book, HTML5 in Action, due to be published early 2012 by Manning Publications. The book is currently available on the Manning Early Access Program, which allows you to download chapters as they become available, and receive the final edition of the book when it is published in either e-Book or printed formats (if you buy the printed version directly from Manning, you get the e-Book for free). For more information on the book, see the book’s web page athttp://manning.com/crowther2/.
The other authors on this title are Rob Crowther, a UK-based developer who is also the writer of Manning’s Quick & Easy HTML5 and CSS3 book; and Ash Blue, from Chicago, IL, who is a HTML5 games development guru. There are currently three chapters available for download (you can get Chapter 1 for free), and four more should follow in the next few weeks. You can discuss the book with other readers (as well as myself, Rob and Ash) on the Manning Sandbox Forums.
Get started with Dojo Mobile 1.7
Learn about Dojo Mobile 1.7, the latest version of the mobile web development framework that’s an extension of the Dojo toolkit. See how to download Dojo 1.7 from trunk and how to use Dojo Mobile in your applications. Explore the various widgets and components it offers, and learn how to wrap your web application up in a native application using PhoneGap.
Read the article in full at http://www.ibm.com/developerworks/library/wa-getstarteddojo/.
Explore MongoDB
In this article, you will learn about MongoDB, the open source, document-oriented database management system written in C++ that provides features for scaling your databases in a production environment. Discover what benefits document-oriented databases have over traditional relational database management systems (RDBMS). Install MongoDB and start creating databases, collections, and documents. Examine Mongo’s dynamic querying features, which provide key/value store efficiency in a way familiar to RDBMS database administrators and developers.
In recent years, we have seen a growing interest in database management systems that differ from the traditional relational model. At the heart of this is the concept of NoSQL, a term used collectively to denote database software that does not use the Structured Query Language (SQL) to interact with the database. One of the more notable NoSQL projects out there is MongoDB, an open source document-oriented database that stores data in collections of JSON-like documents. What sets MongoDB apart from other NoSQL databases is its powerful document-based query language, which makes the transition from a relational database to MongoDB easy because the queries translate quite easily.
Read the full article on IBM developerWorks at http://www.ibm.com/developerworks/opensource/library/os-mongodb4/index.html.
