Make iframe invisible

Question

I have an iframe being displayed on a website. What I would like to do is display the iframe on my site but make it so that when a user is looking at it, they won't realize it's an iframe. Right now when you "right click" the iframe it says "view frame source". Is there a way to get rid of that, so the user will just think the iframe is part of the website and not an iframe?

Thanks in advance for your help.

score 7 · Accepted Answer · answered Jan 07 '13 at 19:11

7

<iframe width="700" scrolling="no" height="400" frameborder="0" src="yourFramePage.html" seamless="seamless">

answered Jan 07 '13 at 19:11

woodlumhoodlum

462
3
10
24

4

This is not cross-browser: the seamless property is only supported by Chrome. – Jan 07 '13 at 19:13
So in other browsers, this will still have the view frame source stuff, but not the borders and things. – Jan 07 '13 at 19:15
I think this is as close as he's going to get. When it comes down to it, the user could have firebug and see the code regardless. – woodlumhoodlum Jan 07 '13 at 19:17
1

+1 Yeah, this is definitely the best response. I just thought it was a good idea to mention that it wasn't cross-browser. – Jan 07 '13 at 19:22
How can it be best response if only a Chrome solution? – geotheory Dec 12 '14 at 13:15

score 4 · Answer 2 · edited May 23 '17 at 11:52

You can bind to right-click and prevent the default action. For implementing the same please checkout this question. However this is only feasible if you have control over the html page inside the iframe.

A viable alternative ~~The only alternative I know of~~ is the seamless attribute in iframe (new HTML5 addition) which is not consistently supported across browsers. (Current browser support is limited to chrome).

For other browsers you can do something superficial like :


iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

And anyways, there is no full-proof solution because the source of html is always available to the end-user. Please try to re-implement your solution using ajax if possible. If you are showing third party site contents in your own site, then I would strongly recommend against camouflaging the distinction so that content appears to be a part of your site.

[update]

If you do really have a compelling reason to use iframes, this presentation by creators of disqus commenting platform provides an insightful approach towards emulation of seamless iframes. The key focus of the presentation is the use of window.postMessage to enable communication between parent html document and iframe.

Make iframe invisible

2 Answers2