The HTML5 Solution to Ajax Pitfalls on Mobile Devices

  • 1,488 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,488
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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