Lightning talk given at the Atlanta AT&T Mobile App Hackathon on 9/10/2011. Blog on topic here: http://community.jboss.org/people/wesleyhales/blog/2011/08/28/fixing-ajax-on-mobile-devices

1. The HTML5 Solution to Ajax Pitfalls on Mobile Devices.
AT&T Mobile App Hackathon - Atlanta
Speaker: Wesley Hales
@wesleyhales
Saturday, September 10, 2011

2. Wesley Hales
• Senior Developer at Red Hat @w
esle
• W3C Member yha
les
• HTML5 User Group Founder
• html5rocks.com, DZone Refcard, and author of
many other articles around the web.
Saturday, September 10, 2011

3. Saturday, September 10, 2011

4. innerHTML()
Saturday, September 10, 2011

5. “If the HTML text contains a <script> tag or its
equivalent, then an evil script will run. ..
Douglas Crockford - Javascript The Good Parts
Saturday, September 10, 2011

6. Java only is innerHTML() bad...
Not Mobile Web Settings
• Causes browser memory leaks
• You don’t get a reference to the element
you just created
• Problems with some elements setting
their innerHTML
• And it fails on iOS...
Saturday, September 10, 2011

7. Java Mobile Web Settings
Beware of innerHTML on
• Stops working randomly
• It’s a 4 year old problem in Safari
• there are hacks to workaround
• setTimeout(‘yuck’)
Saturday, September 10, 2011

8. Java Mobile Web Settings
The Solution
• get the xhr.responseText
• send it to an automatically generated
HTML5 sandbox iframe
• pull from the iframe DOM and use
document.adoptNode
Saturday, September 10, 2011

9. Java Mobile Web Settings
The Solution
function getFrame() {
var frame = document.getElementById("temp-frame");
if (!frame) {
// create frame
frame = document.createElement("iframe");
frame.setAttribute("id", "temp-frame");
frame.setAttribute("name", "temp-frame");
frame.setAttribute("seamless", "");
frame.setAttribute("sandbox", "");
frame.style.display = 'none';
document.documentElement.appendChild(frame);
}
return frame.contentDocument;
}
Saturday, September 10, 2011

10. Java Mobile Web Settings
The Solution
var frame = getFrame();
frame.write(responseText);
Saturday, September 10, 2011

11. Java Mobile Web Settings
The Solution
document.
getElementById(elementId).
appendChild(document.adoptNode
(incomingElements));
Saturday, September 10, 2011

12. Mobile Web Apps Live (or DIE) by the UI
Questions?
Saturday, September 10, 2011