joseph / Monocle

A silky, tactile browser-based ebook JavaScript library.
http://monocle.inventivelabs.com.au
MIT License
743 stars 200 forks source link

Relative paths in Xhtml files #29

Closed joaosantos81 closed 12 years ago

joaosantos81 commented 13 years ago

Hi,

I am using Monocle to do some tests and I found some problems with relative paths in Xhtml files of ePubs. In particular, I realized that, despite a XHTML inside a ePub include a correct path to a resource (e.g. image or CSS), the Monocle reader is requesting the resource from root.

Example: XHTML file (available in http://localhost/dest/123/maugham.magician/OPS/title.xml)

HTTP request performed by Moncole reader: http://localhost/css/book.css instead of http://localhost/dest/123/css/book.css (NOTE THAT THE BASE URL IS ROOT INSTEAD OF CURRENT XHTML URL).

Does someone know any work around for this issue ?

Thanks J. Santos

joseph commented 13 years ago

Monocle doesn't touch the request — it's straight from the mark-up to the browser. What does your BookData object look like?

joaosantos81 commented 13 years ago

With new version of Monocle (1.0.299), it seems to be working fine. Doing some more tests to be sure that this issue does not repro anymore.

Thanks J. Santos

joaosantos81 commented 13 years ago

Hi,

I have been investigating more this issue and I realized that this issue is not related with the Monocle version. Instead, what is causing this issue is the implementation of getComponent function. In my case, I need to use Ajax to get the book contents so my implementation is:

 getComponent: function(cmptId)
{
    var response = $.ajax({
       type: 'GET',
       async: false,
       url: cmptId
     }).responseText;

    response = response.replace("<head>", "<head><base href='" + urlBase + "'/>");
    return response;
}

Regarding this implementation, from my tests, I concluded that: 1) I had to append a BASE element in HTML response. Otherwise, I couldn't use relative paths when including images, CSS, etc in book sections HTML code.

2) In Firefox, this approach does not work very well. a) From one hand, when using Offline features (to cache book contents), the Firefox offline bar (that ask if the user accept the offline assets) suddenly disappear. It usually happens when there are issues in web page html code. It only happens when I use Ajax to download the book contents. When using URLs, it works fine

b) On other hand, I realized that, even when using the BASE element, the Firefox performs duplicated HTTP requests to assets (images, CSSs). Some of there requests are correct but other ones use the root as the base URL (causing 404 errors on server). Saying this, I would like to know if someone is using Ajax on getComponent implementation. If yes, there's any work around for issues I reported above?

Thanks for all JSantos

joloco commented 12 years ago

I know this is an old thread, but in case anyone else needs help, here's my solution.

The XML file is delivered by a server-side script, which looks through the XML and turns all relative URLs into absolute ones, pointing back to the script itself. It retrieves the file requested, sets the right Content-Type for the type of file, then sends it to the browser.

Works pretty well!

joseph commented 12 years ago

Thanks for the update. I'm closing this on the basis that it's more or less a hazard of EPUB construction — it assumes files are being served from the root of the domain. If that's not the case for your reader, you may need to hack your source documents as per @joloco's suggestion.