Javascript: usage of DOMParser on mobile devices (iOS 7.*)

Question

I'm using angular in my project. But it doesn't matter)

I have to use DOMParser to check and edit some data in one field (.Content)

And all was ok... I took iPad 3 with installed iOS 7 and was suprised...

Why DOMParser isn't working on iOS 7 (but works on iOS 8+)?

How can i solve this issue on iOS 7? Maybe there are some workarounds?

Here is part of my code:

var parser = new DOMParser();
var doc = parser.parseFromString('<div id="fetchContent">' + $scope.news.Content + '</div>', "text/html");
...
$scope.news.Content = doc.getElementById('fetchContent').innerHTML;

if i delete this code - app is working normally, but with DOMParser seems that it raise en error...

Could you be more specific as to what kind of error it throws? — James, Dec 21 '15 at 20:19
@JavaAnto how can i know it? it breaks on function with domparser... — brabertaser19, Dec 21 '15 at 20:21
If DOMParser is the problem, there is another approach to this problem. You can append the html into the body of the page and get child nodes like below: `var div = document.createElement('div'); div.innerHTML = 'some html'; var result = div.childNodes;` — James, Dec 21 '15 at 20:24
A detailed explanation is given here : http://stackoverflow.com/a/10585079/2110188 — James, Dec 21 '15 at 20:29

score 3 · Answer 1 · answered Dec 21 '15 at 20:48

Certain browsers don't support this functionality. To patch this, we can use the following javascript code:

* inspired by https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      proto = DOMParser.prototype
    , nativeParse = proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser()).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}

    proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            ;
                if (markup.toLowerCase().indexOf('<!doctype') > -1) {
                    doc.documentElement.innerHTML = markup;
                }
                else {
                    doc.body.innerHTML = markup;
                }
            return doc;
        } else {
            return nativeParse.apply(this, arguments);
        }
    };
}(DOMParser));

The above script was extracted from mozilla's website here.

Javascript: usage of DOMParser on mobile devices (iOS 7.*)

1 Answers1