Your SlideShare is downloading. ×
The HTML5 Solution to Ajax Pitfalls on Mobile Devices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The HTML5 Solution to Ajax Pitfalls on Mobile Devices

1,534
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

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,534
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The HTML5 Solution to Ajax Pitfalls on Mobile Devices. AT&T Mobile App Hackathon - Atlanta Speaker: Wesley Hales @wesleyhalesSaturday, 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 PartsSaturday, 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.adoptNodeSaturday, 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