How to render certain spine document under specific DIV?

[hz0324]

Hi, I am working on a project that needs to render more than one chapter on different areas.
Maybe look like this:

I have tried to COPY the iframe that already rendered using Readium and PASTE them to the DIV like this:

This approach works for a normal iframe which loads content from a real url such as www.google.com, but failed in Readium' case. I have noticed that , the src of iframe is something like this:

This special src value only work at the first time, if you try to load it again, the following error will occur. I found this src value changes everytime. I guess COPY and PASTE approach is not going to work.

So, right now I am trying to find out how to render a certain spine document, inside an iframe, under a designated DIV, not automatically by Readium. Is this possible? Or where can I found the code snippets that I can stduy with?

Please help. Thank you very much.

BTW, using multiple Readium instance is not acceptable right now. And, using back end to host the ebook, which I know should be working, is also unacceptable at this moment.

[danielweck]

Personally if I had to implement this functionality, I would start by creating a totally new type of "view". Currently:

1. "reflowable" view (single iframe for HTML document / EPUB spine item): https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js
2. "fixed" view (one or two iframes, each for a fixed-layout page): https://github.com/readium/readium-shared-js/blob/develop/js/views/fixed_view.js
3. "scroll" view (one or more iframes, each for an HTML document / EPUB spine item): https://github.com/readium/readium-shared-js/blob/develop/js/views/scroll_view.js

Note that both "fixed" and "scroll" view wrap multiple instances of "one page view" to actually embed iframes, see https://github.com/readium/readium-shared-js/blob/develop/js/views/one_page_view.js
The "fixed" view iframe layout is horizontal (two iframes maximum, side by side), whereas the "scroll" view layout is multiple iframes stacked on the vertical axis.

The bottom line is: you must leverage Readium's "iframe loader" infrastructure ( https://github.com/readium/readium-shared-js/blob/develop/js/views/iframe_loader.js ) to handle document loading / caching, etc. If you bypass this by creating your own iframes, you will essentially break a number of critical reading system features.

I hope this helps!
Let us know how it goes :)

[hz0324]

@danielweck Thank you very much, Daneil. It sure helps a lot.

[hz0324]

@danielweck Hi, sir, please help.

I have tried to read the code you mentioned above, but it really hard to figure out how they work step by step, since there isn't too much comments.

Could you please give me more hints? Which code snippets should I study if I want a function like this:

renderSpineDocAt (spineIndex or spineHref, "#myDiv" );

The first parameter is spineIndex or spineHref that indicates which spine I want to show.
The second parameter is the selector of the element that will be used to attach the iframe.

In fact, I don't really mind the control part of the iframe, such as getCfi, or openNextPage.
As long as the content is rendered inside an iframe, it will be much easier for me to control them using normal DOM manipulation. or just rely on the default behavior of iframe.

Please help, sir.
Thank you very much.

[danielweck]

I am afraid I cannot help with your use-case (beyond my initial suggestions), as this diverges too much from how a traditional reading system lays out publication pages / documents. As I said, you would need to write a new type of "view" in order to achieve your desired layout. You cannot simply take arbitrary documents from the linear reading order (spine), and push them into arbitrary iframes, as this is normally the responsibility of the reading system (to present / render the publication in its linear reading order, along the spine "axis").