the html5 solution to ajax pitfalls on mobile devices
Post on 25-May-2015
1.556 Views
Preview:
DESCRIPTION
TRANSCRIPT
The HTML5 Solution to Ajax Pitfalls on Mobile Devices.AT&T Mobile App Hackathon - AtlantaSpeaker: Wesley Hales@wesleyhales
Saturday, September 10, 2011
• Senior Developer at Red Hat
• W3C Member
• HTML5 User Group Founder
• html5rocks.com, DZone Refcard, and author of many other articles around the web.
Wesley Hales@wesleyhales
Saturday, September 10, 2011
Saturday, September 10, 2011
innerHTML()
Saturday, September 10, 2011
Douglas Crockford - Javascript The Good Parts
“If the HTML text contains a <script> tag or its equivalent, then an evil script will run. ..
Saturday, September 10, 2011
Java 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...
Not only is innerHTML() bad...
Saturday, September 10, 2011
Java Mobile Web Settings
• Stops working randomly
• It’s a 4 year old problem in Safari
• there are hacks to workaround
• setTimeout(‘yuck’)
Beware of innerHTML on
Saturday, September 10, 2011
Java Mobile Web Settings• get the xhr.responseText
• send it to an automatically generated HTML5 sandbox iframe
• pull from the iframe DOM and use document.adoptNode
The Solution
Saturday, September 10, 2011
Java Mobile Web SettingsThe Solutionfunction 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 SettingsThe Solution
var frame = getFrame();frame.write(responseText);
Saturday, September 10, 2011
Java Mobile Web SettingsThe Solution
document.getElementById(elementId).appendChild(document.adoptNode(incomingElements));
Saturday, September 10, 2011
Mobile Web Apps Live (or DIE) by the UIQuestions?
Saturday, September 10, 2011
top related