Making an iframe readonly - javascript

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?

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>

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;
}

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!

Related

Hide, remove or change color of specific class inside external iframe

I'm trying to embed a google form on my blogger blog but I want to remove or hide somehow the branding link and text that google shows at the end of the form: https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?usp=sf_link
Is it possible somehow to hide that or make the text from that class the same as form color so it cant be visible by user? Thank you!
I'm afraid not!
I've been having the same problem; this is called a Cross Origin Policy issue or CORS for short.
Due to security issues, JS rejects to read or change the content of a page in another domain; so you can't use JS to do this. CSS also only acts on the content on the page but the content of the iframe is not on the page.
But a cross-over
you can use blank rectangles to not let them be shown but it's not really guaranteed.
:root {
--hiderColor: red;
}
#hider {
width: 640px;
height: 55px;
margin-top: -50px;
background: var(--hiderColor);
position: absolute;
z-index: 10;
}
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?embedded=true" width="640" height="937" frameborder="0" marginheight="0" marginwidth="0" class="iframe">Loading…</iframe>
<div id="hider"></div>
It's not really escape-proof but it does the trick; also I shall say you shouldn't do this!
By the way, I used the red colour so you know how it works you, can change the colour;
And a note: the widths of the div and iframe must be one and the same
Good luck!
External iframe means you have no control on what's inside.
I had that problem for something I made for a class, I used
div.a {
display: none;
}
I haven't tried it, but you should be able to use
<p style="color:black">(Link Here)</p>
To recolor the text. Again, I haven't done much restyling of links, but these should work.

Hide element, but keep it clickable?

I have a button generated inside an iframe. Unfortunately, I can't change how it looks, as it's delivered by 3rd party library. I thought of a little trick to use my own button and keep the generated one inside:
<button id="my-button">Click Me</button>
This way, I can tell the library to place its buttons inside mine, so the <iframe> would get appended like this:
<button id="my-button">
Click Me
<iframe src="..."></iframe>
</button>
Now, the only thing left is to hide the <iframe>. I can't simply use visibility: hidden, because that way the click event no longer works. Why I did is instead:
#my-button {
overflow: hidden;
position: relative;
}
#my-button > * {
position: absolute;
top: 0;
bottom: 0;
opacity: .0001;
}
It seems to be a good solution, as I don't see the 3rd party button and I can do whatever I want with my own button. I just need to make sure it's not larger that the button inside, which would render part of my own button unclickable.
What I would prefer, would be rendering that other element somewhere else and hiding it with display: none or position: absolute outside of my viewport and then triggering the click inside it. Due to modern CORS policies, as far as I know it's not possible to reach elements inside the <iframe> though - am I right?
Is there any more reliable way to achieve the same effect without so much trickery? I'm not that excited about opacity: .0001, it make me anxious that in some browsers it will leave some visible trace of the other button.
It isn’t possible to have an element of the parent trigger a click on a button (or any other element) within an iFrame for security reasons.

javascript popup from scratch no libraries

I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever.
I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)?
(no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!)
Any suggestions or links would be great,
thanks
I think this article named "CSS OVERLAY TECHNIQUES" will help you.
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely
positioning an HTML element on the page. There would be an empty div
in the markup, and with CSS this div is positioned absolutely and
given a high z-index value to make sure it stays on top of all other
elements on the page, except the modal which is opened on top of this
overlay, which will get a even higher z-index than the overlay.
<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>
Supposing we have already added an empty div to the markup and given
it a class .overlay, the CSS to position this overlay on the page is:
html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
If you want a modal dialog for real, use window.showModalDialog:
returnVal = window.showModalDialog(uri[, arguments][, options]);
where
returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
uri is the URI of the document to display in the dialog box.
arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
options an optional string that specifies window ornamentation for the dialog box.
Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.

Prevent element from being manipulated with CSS

I'm currently building a small ad network, mainly intended to be used at our own websites.
The ads are loaded by including a script on the site, like...
<script src="http://someurl.com/somejs.js"></script>
Anywhere I place the script line, it's gets replaced with the ad content, inside a with inline styling.
Must ads will be HTML, and that's what troubles me...
For example, lets pretend that the ad content is something like
<div style="height: 150px; width: 90px; overflow: hidden; display: inline-block;"><p>Buy cheap buttons</p><p><img src="deliciousButtons.png" /></p></div>
And then lets pretend that the content is loaded into a webpage, where someone has the following in his stylesheet:
img { border: 1px solid red; }
Now the image in the ad gets a red border - bummer.
My only solution would be to use iframes... However, I've never really liked iframes.
Is there a html-element, where you can place HTML inside and everything placed inside is not susceptible to any stylesheet preferences - only inline styling?
... If no. Any suggestions on how to do it? With no iframes :)
You can override the inherited styles, but for it to work properly, you will need to everride every possible CSS option and probably mark such overrides as !important, really, iframes is the best way to accomplish that, another possibility is to use static images or flash, but i guess this is also out of the possible options.
You can do something like the following.
Add a class which you don't want the style.
<img src="deliciousButtons.png" class="no-border"/>
Then on your css.
img:not(.no-border) {
border: 1px solid red;
}
demo

Cannot position Google +1 button with CSS?

I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)

Categories

Resources