11

I am using following code to display pdf using google with iframe.. It's working fine. But I want to disable "pop-out" option (which on click opening my pdf in new tab with google docs) shown on right upper corner beside zoomin option on my webpage. Is it possible?

Currently I am using following code -

<iframe src="http://docs.google.com/gview?url=http://example.com/files/myfile.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0">

Rubén
  • 34,714
  • 9
  • 70
  • 166
Dr Manish Lataa-Manohar Joshi
  • 2,380
  • 5
  • 17
  • 38

3 Answers3

9

Can use sandbox to stop the popup working inside iframe

<iframe 
    sandbox="allow-scripts allow-same-origin"
/>

allow-scripts: to run javascript inside iframe.
allow-same-origin: to allow loading file from google viewer.
without allow-popups, nothing will happen when users click on pop-out icon.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Vaibhav Mandlik
  • 51
  • 2
  • 13
leLabrador
  • 129
  • 2
  • 4
  • have the same issue as the OP. I am looking to remove the button, but can't find a way due to cross-origin issues; so I was really hoping this would work, but it does not. The popout button still opens to a new window. – rolinger Aug 28 '23 at 17:35
  • correction....this DOES work! I realized after my first comment that I had applied the sandbox to the iFrame #1, and I was testing on iFrame #2. Is there anyway to suppress `Blocked opening` messages in the console? – rolinger Aug 28 '23 at 17:52
  • it does work, but in the browser console I am getting a warning: `An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing` - I don't understand why its working if the two combined have the same effect as having no `sandbox=` at all. Are there sandbox options that would be more effective without the warning? – rolinger Aug 28 '23 at 18:01
0

Run this javascript (sample with jQuery) on your page (I assume the class is the same for all clients)

$('.ndfHFb-c4YZDc-Wrql6b').remove();
roman m
  • 26,012
  • 31
  • 101
  • 133
0

The following solution is useful to remove preview button. Add this code onload function of your iframe. It's applied after iframe is loaded.

var head = $("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '.ndfHFb-c4YZDc-Wrql6b{display:none}; ' +
          '</style>';
$(head).append(css);
Pankaj Zade
  • 75
  • 5
  • It's worked for me. Maybe the class name is different in your case, you change the class name of a head and try again. – Pankaj Zade Apr 29 '18 at 19:07
  • If this ever did work is probably no longer does. In a Cordova app, modifying the `` is prevented due to `cross-origin` issue. Unless you know a way around this? – rolinger Aug 28 '23 at 17:46