postMessage to PDF in an iFrame

Posted by Linus on Stack Overflow See other posts from Stack Overflow or by Linus
Published on 2010-01-19T15:10:21Z Indexed on 2010/03/29 14:43 UTC
Read the original article Hit count: 784

Filed under:
|
|

Here's my situation.

I had a webpage with an embedded PDF form. We used a basic object tag (embed in FF) to load the PDF file like this:

<object id="pdfForm" height="100%" width="100%" type="application/pdf" data="..url"></object>

On this webpage was an Html Save button that would trigger some Javascript which used the postMessage API of the embedded object to execute javascript embedded in the PDF. Basically, that code looked like this:

function save() {
    sendMessage(["submitForm"]);
}

function sendMessage(aMessage) {
    pdfObject = document.getElementById("pdfForm");

    if (typeof(pdfObject) == "undefined")
      return;

    if (typeof (pdfObject.postMessage) == "undefined")
      return;

    pdfObject.postMessage(aMessage);
}

This all was working beautifully.

Except we ran into an issue with Firefox so that we need to embed the PDF using iFrame, instead of the object tag. So now, the PDF is embeded using this code:

<iframe id="pdfWrapper" src="..someUrl" width="100%" height="800px" frameborder="0"></iframe>

Unfortunately, with this code, the javascript for posting a message no longer works, and I can't really figure out how to get access to the pdf object anymore so that I can access the postMessage api.

Using fiddler or the chome javascript debugger, it is clear that within the iframe, the browser is automatically generating an embed tag (not an object tag), but that does not let me access the postMessage API. This is the code I'm trying which doesn't work:

function sendMessage(aMessage) {

        var frame = document.getElementById("pdfWrapper");
        var doc = null;

        if (frame.contentDocument)
           doc = frame.contentDocument;
        else
        if (frame.contentWindow)
           doc = frame.contentWindow.document;
        else
        if (frame.document)
           doc = frame.document;

        if (doc==null || typeof(doc) == "undefined")
          return;

        var pdfObject = doc.embeds[0];

        if (pdfObject==null || typeof (pdfObject.postMessage) == "undefined")
          return;

        pdfObject.postMessage(aMessage);
    }

Any help on this? Sorry for the long question.

EDIT: I've been asked to provide samples in code so that people can test whether the messaging works. Essentially, all you need is any PDF with this javascript embedded.

function myOnMessage(aMessage) {
    app.alert("Hello World!");
}

function myOnDisclose(cURL, cDocumentURL) {
    return true;
}

function myOnError(error, aMessage) {
    app.alert(error);
}

var msgHandlerObject = new Object();
msgHandlerObject.onMessage = myOnMessage;
msgHandlerObject.onError = myOnError;
msgHandlerObject.onDisclose = myOnDisclose;
msgHandlerObject.myDoc = this;

this.hostContainer.messageHandler = msgHandlerObject;

I realize you need Acrobat pro to create PDFs with javascript, so to make this easier, I posted sample code--both working and non working scenarios--at this url: http://www.filedropper.com/pdfmessage

You can download the zip and extract it to /inetpub/wwwroot if you use Windows, and then point your browser to either the works.htm or fails.htm.

Thanks for any help you can give.

© Stack Overflow or respective owner

Related posts about pdf

Related posts about acrobat