components via Ajax and <iframe>

[haniqassim]

I have been using an AJAX call to load components following the Dubliners online example. It's been working fine for me. However, I have noticed there is duplicity in the content returned via AJAX in the "src=" in iframe as well as in between the <iframe> and </iframe> tags. When I load Arabic UTF8 characters, iOS and Safari hangs. I'm suspecting this is the problem. I looked through the examples and I can't see an AJAX loading example.

Also, I have noticed that Dubliners is not using iframes at all.

Here's my bookData code:

var bookData = {
getComponents: function () {
return [ <% @book.spine.each do |item|%>
'/books/<%=@book.id%>/section?section=<%=item%>',
<%end%>];
},
getComponent: function (componentId) {
return this.getViaAjax(componentId);
},

  getViaAjax: function (path) {
    var ajReq = new XMLHttpRequest();
    ajReq.open("GET", path, false);
    ajReq.send(null);
    return ajReq.responseText;
  }
}

[joseph]

I'm not sure what the UTF8 implications are of loading JS strings into the src attribute of iframes, but it sounds plausible. It'd be very helpful if you could prepare a simple test demonstrating this, because I haven't seen it myself.

Note that the Dubliners example at monocle.inventivelabs.com.au uses a very old (like March 2010) version of Monocle, pre-iframes and a lot of other stuff. If you're following along, you'll have more luck by looking at the examples in the /test directory.

[haniqassim]

Hi Joseph,

Apologies for the late reply. Got swamped with work. About the Dubliners example, I meant I used the Ajax call function just like you used it in Dubliners. I do realize it is old.

As for iframes, I am following ur updated test examples. It works perfectly with latin letters and the default {direction: ltr}. However, when I use {direction: ltr} in CSS and all Arabic text, it goes blank. I will try and get u an example as soon as possible.

The other problem with iframes is that it is harder to put some javascript/css controls from outside the iframe. The browser treats an iframe as another instance of a browser window, totally separate. It would be great if you can put an example of the same Ajax call function but to load html files into a div like in some of the test examples.

[joseph]

I haven't done a lot of testing with non-Latin characters (mostly because I don't know what I'm doing). A test here would be very helpful — either as a single commit to the test/ directory, or as a gist.

Iframes are the only method in HTML of sandboxing content in its own CSS and JS environment, which is essential for any non-trivial ereader implementation. Every test example (and now each example on the Monocle site) uses an iframe to display components — it's the way Monocle has worked since version 2. It should be very easy to put controls around this content, I hope this is documented extensively in all the examples as well as here: https://github.com/joseph/Monocle/wiki/Controls

Let me know if you can think of general-purpose improvements to the Monocle controls API or documentation.

[joseph]

I'm closing this as 'answered'. Please re-open if there are remaining queries related to this. There is a case for opening a separate ticket for text directionality in Monocle. I'll think about this.