admin管理员组

文章数量:1026989

I've embed pdf in my website using iframe google drive pdf viewer, below is my codes I've used

It works fine, but I want to remove the pop-out button appear on the top right corner in my website so that, viewers can't view outside my page]1

Any help would be appreciated

I've embed pdf in my website using iframe google drive pdf viewer, below is my codes I've used

It works fine, but I want to remove the pop-out button appear on the top right corner in my website so that, viewers can't view outside my page]1

Any help would be appreciated

  • javascript
  • html
  • css
  • pdf
Share Improve this question edited Sep 25, 2018 at 8:16 Varsha Dhadge 1,75115 silver badges23 bronze badges asked Sep 25, 2018 at 8:03 kymbkymb 473 silver badges10 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

I was able to solve this problem with the following iframe sandbox attribute value:

<iframe sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
        src=""
        width="640"
        height="480"
        https://docs.google./gview?embedded=true&url="<url-your-pdf>"?t="1625427767140"></iframe>

Use this code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        iframe{
  height:100vh;
}
    </style>

</head>
<body>



<iframe src="https://docs.google./viewer?url=http://www.pdf995./samples/pdf.pdf&embedded=true" width="100%" height="100vh" frameborder="0" scrolling="no" ></iframe>

<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;">&nbsp;</div>
<!-- </div> -->
</body>

</html>

Try something like below: Using a hidden element on top of pop-out button makes it inaccessible. Or, if want to hide, remove opacity and set the background-color.

<div style="width: 640px; height: 480px; position: relative;"> 
      <iframe src="http://docs.google./viewer?url=YOUR PDF/DOC FILE URL &embedded=true"   width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
      <div style="width: 40px; height: 40px; position: absolute; opacity: 0; right: 12px; top: 12px;">&nbsp;</div>
 </div>

The above answers do work, but with caveats.

  1. Just the iFrame sandbox prevents the button from working, but the button still shows.

  2. Just masking the button to prevent it from being clicked works, but the button still shows.

  3. To disable the button and prevent it from showing:

    <div style="position: relative;">

    <iframe src="http://docs.google./viewer?url=https://example./file.pdf &embedded=true" sandbox="allow-scripts allow-same-origin"></iframe>

    <div style="width:40px; height:40px; position:absolute; background:white; right:12px; top: 12px;">&nbsp;</div>

    </div>

I've embed pdf in my website using iframe google drive pdf viewer, below is my codes I've used

It works fine, but I want to remove the pop-out button appear on the top right corner in my website so that, viewers can't view outside my page]1

Any help would be appreciated

I've embed pdf in my website using iframe google drive pdf viewer, below is my codes I've used

It works fine, but I want to remove the pop-out button appear on the top right corner in my website so that, viewers can't view outside my page]1

Any help would be appreciated

  • javascript
  • html
  • css
  • pdf
Share Improve this question edited Sep 25, 2018 at 8:16 Varsha Dhadge 1,75115 silver badges23 bronze badges asked Sep 25, 2018 at 8:03 kymbkymb 473 silver badges10 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

I was able to solve this problem with the following iframe sandbox attribute value:

<iframe sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
        src=""
        width="640"
        height="480"
        https://docs.google./gview?embedded=true&url="<url-your-pdf>"?t="1625427767140"></iframe>

Use this code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        iframe{
  height:100vh;
}
    </style>

</head>
<body>



<iframe src="https://docs.google./viewer?url=http://www.pdf995./samples/pdf.pdf&embedded=true" width="100%" height="100vh" frameborder="0" scrolling="no" ></iframe>

<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;">&nbsp;</div>
<!-- </div> -->
</body>

</html>

Try something like below: Using a hidden element on top of pop-out button makes it inaccessible. Or, if want to hide, remove opacity and set the background-color.

<div style="width: 640px; height: 480px; position: relative;"> 
      <iframe src="http://docs.google./viewer?url=YOUR PDF/DOC FILE URL &embedded=true"   width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
      <div style="width: 40px; height: 40px; position: absolute; opacity: 0; right: 12px; top: 12px;">&nbsp;</div>
 </div>

The above answers do work, but with caveats.

  1. Just the iFrame sandbox prevents the button from working, but the button still shows.

  2. Just masking the button to prevent it from being clicked works, but the button still shows.

  3. To disable the button and prevent it from showing:

    <div style="position: relative;">

    <iframe src="http://docs.google./viewer?url=https://example./file.pdf &embedded=true" sandbox="allow-scripts allow-same-origin"></iframe>

    <div style="width:40px; height:40px; position:absolute; background:white; right:12px; top: 12px;">&nbsp;</div>

    </div>

本文标签： javascriptHow to disable popout option in pdf viewer with google drive embedded iframeStack Overflow

版权声明：本文标题：javascript - How to disable pop-out option in pdf viewer with google drive embedded iframe - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745488215a2152840.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。