postMessage to PDF in an iFrame
- by Linus
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.
