CODEWITHSUNDEEP
jqueryhtmlcss
Rafik Bari
Rafik Bari

Reputation: 5037

How to hide the background color of an element within an iframe which is loaded from another domain?

There is a restriction from accessing the iframe element from the parent window due to Same Origin Policy. Is there a CSS hack or a Workaround that allow us to hide the background color or at least make it appear transparent ?

EDIT :

The iframe has the id ulBlock and it contain a div with id listgroup 

#listgroup {
background: none repeat scroll 0 0 #F4F4F4;
border-color: #FDF6E5;
border-left: 1px solid #FDF6E5;
border-right: 1px solid #FDF6E5;
border-style: solid;
border-width: 1px;
margin: 0;
padding: 0;
}

#ulBlock {
height: 321px;
visibility: visible;
}

Upvotes: 1

Views: 258

Answers (1)

darksky
darksky

Reputation: 2090

Obviously, you can't run JavaScript on the .contents() of the iframe if it's on a different domain than its host because of the Same Origin Policy. So I start by assuming that $("#ulBlock").contents() is null or inaccessible. Otherwise, you can just find() the desired div and change its css with jQuery.

The short answer to your question whether there is a CSS trick is no. While there is no CSS trick, there are several ways to accomplish what you want:

  • refresh the iframe and pass some information in the query string so that the page that gets reloaded in the iframe knows to hide or make transparent whatever div you are referring to.

  • Take advantage of CORS. While some older browsers still don't support it, and I've read that CORS is considered a mild security vulnerability, it will allow you to access the iframe contents and run scripts to change the contents of the iframe. In short, it involves including a header called Access-Control-Allow. It may be worth looking that up.

  • Pass browser messages back and fourth. I think Daniel Park has done a great job writing a plugin that allows posting browser messages to and from the iframe. Most modern browsers support this feature. Visit his site here: http://postmessage.freebaseapps.com/. Roll down to where it says examples. He specifically wrote that plugin to work with iframes. I've used his code in one of our commercial applications.

Keep in mind that in all of the above cases, you have to have access to the source of both the host of the iframe and the page that is being embedded.

Upvotes: 3

Related Questions