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
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
The HTML5 Solution to Ajax Pitfalls 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
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