iBooks JavaScript Environment - invalid element name

Question

So, I've narrowed down my error (well, at least the first one) to this function:

var genArray = function () {
    var arr, len, i;
    if(arguments.length > 0) {
        len = [].slice.call(arguments, 0, 1)[0];
        arr = new Array(len);
        for(i = 0; i < len; i++) {
            arr[i] = genArray.apply(null, [].slice.call(arguments, 1));
        }
    } else {
        return null; //or whatever you want to initialize values to.
    }
    return arr;
}

Then, I get a very unhelpful error:

error on line 71 at column 23: StartTag: invalid element name
Below is a rendering of the page up to the first error

Now, the function is decidedly not on line 71 (perhaps it is in the compiled ePub, but I have no idea how they correlate). Further, I have no idea what that error means in a JavaScript context. Also, this code works fine in a browser (Safari included).

Any ideas what could be causing the issue?

EDIT: On a whim, I checked whether [] was the problem by changing it to Array(). No luck.

Answer 1

Okay, so I discovered a solution to my problem. I just needed to surround my JavaScript in CDATA tags like so:

//<![CDATA[
var genArray = function () {
    var arr, len, i;
    if(arguments.length > 0) {
        len = [].slice.call(arguments, 0, 1)[0];
        arr = new Array(len);
        for(i = 0; i < len; i++) {
            arr[i] = genArray.apply(null, [].slice.call(arguments, 1));
        }
    } else {
        return null; //or whatever you want to initialize values to.
    }
    return arr;
}
//]]>

I discovered this by using the epubcheck tool which said something to the effect that the file must have properly formed characters or something. I don't recall the exact message. Anyways, this reminded me of a problem I had in a script where I used some unicode characters. I remembered about CDATA which solved it. Then I found this stackoverflow question which basically says it's necessary for when your pages must be interpreted as XML/XHTML as well, which is the case for ePubs.

So, moral of the story is wrap javascript in CDATA tags for ePubs or iBooks.

EDIT: It should be noted that it's worth doing this around all of your JavaScript. The issue in my case was the < less than operator being interpreted as the start of a tag. However, it is probably cleaner to just include the CDATA tag around all of your JavaScript rather than trying to isolate sources of the issue.

EDIT 2: In the interest of aggregating information to whoever finds this answer useful, it should also be noted that having all of one's JavaScript in external files probably also works (according to the source linked in the answer to the question I've linked to). I don't care to test this at the moment, but it should work because the external JavaScript will not be parsed as XML like it is inside of a <script> tag.

Answer 2

The error you report indicates the XHTML file source is in error. I would take a look at, uhh, line 71 column 23 of the XHTML file in question. What's there? Could it possibly be <StartTag>? Is the XHTML being generated programatically somehow? EPUBs are not "compiled"; they are just zipped, and this line/column information refers to the actual position in the XHTML file in the EPUB. What does epubcheck say?

This kind of error message would not be generated by problems in any dynamic HTML created via script; those would result in a DOMError.

My guess is that iBooks is finding some error in the function at parse time, which terminates the parsing process before the XHTML parsing is completed and the XHTML error can be reported. However, I can't imagine what the error might be; I doubt it's the missing semi-colon at the end of the function, but could possibly be depending on what's on the next line.

Totally minor point, but

len = [].slice.call(arguments, 0, 1)[0];

is the same as

len = arguments[0];

Answer 3

Sounds to me more like an XHTML error. When you run in the browser if you are not opening it as an XHTML file, do so and see if it breaks. Browsers tend to be more lenient than EPUB readers. You are most likely creating some sort of invalid HTML element with your slices, it would be great to have the full page to identify exactly what 'getArray()' is returning...