javascripthtmliframe

How do you disable copy paste within an iframe?


I am using google viewer api and I want to disable the copy paste functionality within the frame.
example:

<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Solution

  • Here's my solution (from my comment):

    One idea I'm thinking of is overlaying a transparent div on the iframe so you can't interact with it at all.

    DEMO

    HTML

    <div id="container">
      <div id="overlay">
      </div>
      <iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0"></iframe>
    </div>
    

    CSS

    #overlay {
      width:590px;
      height:500px;
      z-index: 1;
      background-color:rgba(255,255,0,0.1);
    }
    iframe {
      width:600px;
      height:500px;
    
    }
    #container {
      position: relative;
    }
    #overlay, iframe {
      position: absolute;
      top: 0;
      left: 0;
    }
    

    I made the overlay (yellow box) width 590px so you still have 10px for the scrollbar.