Changing links to open outside an iframe from a Google Doc inside an iframe

Question

I'm trying to have links from a Google Doc embedded inside an iframe to open outside the iframe. I've tried several solutions. I tried defining the base target to any of _parent, _top or _blank. Google Docs creates the code within the iframe, so I try changing it with jquery to change the target-attributes, but that doesn't seem to work.

The relevant html-code is:

<iframe id="googledoc" base target="_blank" scrolling=no width=1000 height=1000 src="https://docs.google.com/document/d/1ctn5fekV4odEepCREAfLg31PrNMGnmwqokY0wHXqu7s/pub?embedded=true">There was a problem fetching the frame.</iframe> <!-- scrolling=no is for backwards-compatibility, also implemented in css -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="../js/plugins.js"></script>
        <script src="../js/iframefix.js"></script>

Note how base target is defined, but seems to have no effect.

The relevant jquery is in iframefix.js and is as follows:

$(document).ready(function () {
   $('#googledoc').contents().find('a').each(function () {
    $(this).attr('target', '_blank');
});
});

I found one solution working with php, but would rather not mess with php. Is there a solution using javascript/jquery?

Answer 1

Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.

It seems you are trying to load google docs in iframe, so it is from other domain and no browser would allow you to access elements within it.

Few years back I wanted same thing and spent lots of time behind it. I came to know its not possible.

You might want to use pdf.js to display docs.

Look at this question for detail