Using the framework pageflip5, we are making a flipbook for our client. The flipbook goes along with a interface that we have made ourselves. So far, everything had been working as advertised/intended. But then we had an issue when testing the flipbook on a web server.

The flipbook has gone through many different stages of design/implementation, but the one that we have settled on for now is using an <object> tag to embed the .html file that contains the pages of the book within the main index of the flipbook site. We are doing this through a javascript file that changes the innerhtml of the page when it is loaded.

$(document).ready(function(){
    $("#flipDiv")[0].outerHTML = ('<object type="text/html" id="flipBook" data="bookme/book1.html" width="100%">alt: <p>hello</p></object>');
});

This works well when the page is open locally, but when we try to open it in a server, the book does not display, even though it appears that it should.

I can not yet post images, but the elements tab under Google Chrome dev tools shows that the pages have been created/loaded, but it does not display on the page.

My first thought was that the problem was occurring because of some way that <object> tags interact with servers, and as such looked in to a possible MIME type error, but I was unable to find a solution.

Any ideas would be appreciated.