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.

Answer 1

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.

Answer 2

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