PDF is not shown while changing the embed tag src attribute dynamically

Question

Possible Duplicate JavaScript: Changing src-attribute of a embed-tag but this is not working for jQueryMobile.

I have the following scenario; I've one page which should view multiple documents (PDF documents) based on a query string value (document url).

I'm using the following code to navigate from different pages to the viewer page

$.mobile.changePage("Viewer.aspx?URL=" + documentURL;

Here is the code I'm using to remove existing embed tag and reinsert it with the document url embedded within src attribute.

$('div[id="pageViewer"]').live("pageshow", function() {
    var queryStringVals = $().SPServices.SPGetQueryString();
    var menuURL = queryStringVals["URL"];

    $("#menuViewer").attr("src", menuURL);
    var parent = $("#menuViewer").parent();
    $("#menuViewer").remove();
    parent.append("<embed id='foodMenuViewer' type='application/pdf' style='width: 400px; height: 900px;' src=" + menuURL + " />");
});

This code is working and new embed tag is inserted but pdf document is not loading!
Also, changing page event to any other events (i.e. pageinit), in this case I'm not able to capture query string value.

Any suggestions?

Answer 1

OK, I'd probably not use an <embed> but rather an <iframe> or even an <object> tag to do what you are doing.

Here's an article that shows this.

Here's a PDFObject that helps embedding PDFs, where they suggest to simply add an <object> tag, like

parent.append("<object id='foodMenuViewer' type='application/pdf' style='width: 400px; height: 900px;' src=" + menuURL + " />");

Hope these helps...