• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The HTML5 Solution to Ajax Pitfalls on Mobile Devices
 

The HTML5 Solution to Ajax Pitfalls on Mobile Devices

on

  • 1,734 views

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

Statistics

Views

Total Views
1,734
Views on SlideShare
1,722
Embed Views
12

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 12

http://paper.li 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The HTML5 Solution to Ajax Pitfalls on Mobile Devices The HTML5 Solution to Ajax Pitfalls on Mobile Devices Presentation Transcript

    • The HTML5 Solution to Ajax Pitfalls on Mobile Devices. AT&T Mobile App Hackathon - Atlanta Speaker: Wesley Hales @wesleyhalesSaturday, September 10, 2011
    • 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
    • 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. .. Douglas Crockford - Javascript The Good PartsSaturday, September 10, 2011
    • 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
    • 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
    • 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
    • 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
    • Java Mobile Web Settings The Solution var frame = getFrame(); frame.write(responseText);Saturday, September 10, 2011
    • Java Mobile Web Settings The Solution document. getElementById(elementId). appendChild(document.adoptNode (incomingElements));Saturday, September 10, 2011
    • Mobile Web Apps Live (or DIE) by the UI Questions?Saturday, September 10, 2011