The HTML5 Solution to Ajax Pitfalls on Mobile Devices.         AT&T Mobile App Hackathon - Atlanta         Speaker: Wesley...
Wesley Hales                               • Senior Developer at Red Hat           @w                                     ...
Saturday, September 10, 2011
innerHTML()Saturday, September 10, 2011
“If the HTML text contains a <script> tag or its                               equivalent, then an evil script will run. ....
Java only is innerHTML() bad...                                Not Mobile Web Settings                               • Cau...
Java Mobile Web Settings                               Beware of innerHTML on                               • Stops workin...
Java Mobile Web Settings                                     The   Solution                                • get the xhr.r...
Java Mobile Web Settings                                     The   Solution                               function getFram...
Java Mobile Web Settings                                     The   Solution                                var frame = get...
Java Mobile Web Settings                                       The   Solution                               document.     ...
Mobile Web Apps Live (or DIE) by the UI                                           Questions?Saturday, September 10, 2011
Upcoming SlideShare
Loading in …5
×

The HTML5 Solution to Ajax Pitfalls on Mobile Devices

1,841 views
1,718 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,841
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The HTML5 Solution to Ajax Pitfalls on Mobile Devices

  1. 1. The HTML5 Solution to Ajax Pitfalls on Mobile Devices. AT&T Mobile App Hackathon - Atlanta Speaker: Wesley Hales @wesleyhalesSaturday, September 10, 2011
  2. 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. 3. Saturday, September 10, 2011
  4. 4. innerHTML()Saturday, September 10, 2011
  5. 5. “If the HTML text contains a <script> tag or its equivalent, then an evil script will run. .. Douglas Crockford - Javascript The Good PartsSaturday, September 10, 2011
  6. 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. 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. 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.adoptNodeSaturday, September 10, 2011
  9. 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. 10. Java Mobile Web Settings The Solution var frame = getFrame(); frame.write(responseText);Saturday, September 10, 2011
  11. 11. Java Mobile Web Settings The Solution document. getElementById(elementId). appendChild(document.adoptNode (incomingElements));Saturday, September 10, 2011
  12. 12. Mobile Web Apps Live (or DIE) by the UI Questions?Saturday, September 10, 2011

×