Question

I’m building a social bookmarking application for use within large companies.

It has a simple JavaScript bookmarklet which currently works fine – the bookmarklet allowes users to save a bookmark from popular browsers. It works for public web links quite well – and is fairly browser-agnostic. The closest example of such a bookmarklet is this:

http://delicious.com/help/bookmarklets

When I am viewing a PDF in my browser (let’s say Chrome/Mac):

http://website.com/file.pdf

This does not work of course – since there is no way to inject HTML markup on top of a PDF being viewed in-browser.

What is the best approach to making links to non-http resources work within a bookmarklet? Do I have to create then inject some kind of invisible iframe and then grab a parent frame and it’s URL to be able to save it?

Answer 1

I don’t know about all browsers, but in Firefox you can inject Javascript and iFrames over PDF files and images. This is because images and PDF files are actually displayed inside special dummy HTML pages generated by Firefox. I think Chrome may be the same.

You can see this for yourself by opening a PDF or image and then opening the Web Console (must use menu, can not use CTRL+SHIFT+K in this case) to get the JS console and then type document.documentElement.outerHTML to see the actual dummy HTML where the PDF or image is embedded.

To detect situations where I can not add an iFrame or other HTML to a page, I might test if document.documentElement is defined, or possibly some other DOM element.

For any browser or file-type combination where this will not work, or if I just wanted to keep things more simple, I’d open a page on my server in a new tab or window and pass the page title and location to that page like http://mysocialsite.tld/add-bookmark?title=file.pdf&location=http://anothersite.tld/file.pdf. That page on my server would let the user complete the bookmarking process.