CODEWITHSUNDEEP
javascripthtmliframe
Aaron
Aaron

Reputation: 4480

Making an iframe readonly

In my html I have an Iframe that is a link to a google doc. Currently the user will be able to edit the document. However, I do not want the user to be able to change the document. How would I make the iframe readonly?

Upvotes: 0

Views: 13484

Answers (3)

Colby Sargent
Colby Sargent

Reputation: 341

Edit

If you are using 'file > publish to web...' in Google Docs, people won't be able to edit your document anyway. Docs Help (see 'How published files look when you share them').

Here's one I just published: try me.

Original Answer

I imagine the only way to fully ensure it's not editable is through some settings on Google Docs itself, any sort of block with JavaScript or CSS has the possibility of being disabled. Also, JavaScript will not be able to control anything inside the iframe, due to it being from a different origin.

With that said, the simplest way is probably with CSS, pointer-events: none; will disable mouse events on the iframe, disabling the user to select it. MDN Docs

iframe { pointer-events: none; }

or as an inline style...

<iframe style='pointer-events: none;'></iframe>

Upvotes: 6

user149341
user149341

Reputation:

There isn't really any way to do this. The browser doesn't recognize the concept of "editing" content in a frame -- all it knows is that it's displaying a page.

If you want to prevent the user from modifying a Google Docs document, use the permissions features provided by Google Docs to prevent editing. The fact that it's in a frame doesn't change anything!

Upvotes: 2

Will Reese
Will Reese

Reputation: 2841

You could use css to cover the iframe with another element/pseudo-element to prevent interaction.

Fiddle

<div class="iframe-wrap">
  <iframe src="http://www.yahoo.com" width="300" height="200">
  </iframe
</div>


.iframe-wrap {
  position: relative;
}
.iframe-wrap::after {
  content: "";
  display:block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Upvotes: 2

Related Questions