1

How to add CSS class and control elements inside of the Iframe using javaScript.

<iframe width="340" scrolling="no" height="37" src="http://www.indiansplash.com/business/include/dash11i.php" id="ifr" hspace="0" marginwidth="0" marginheight="0" vspace="0" style="width: 585px; height: 47px; border: #dddddd 1px solid"></iframe>

Here is my code. http://jsfiddle.net/wV8gF/

Here i want to hide first column which are having BSE logo and i want to change the color of values.

Omm
  • 1,615
  • 1
  • 11
  • 11
  • and where do you want the script? inside the iframe page? or from the page that contains the iframe. – Joseph May 07 '12 at 07:26
  • Please check http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe for how to apply CSS to an Iframe – rt2800 May 07 '12 at 07:29
  • @Joseph not inside of inframe. – Omm May 07 '12 at 07:34
  • If _iframe_ contains page from different domain (protocol, server, port) then you maybe need additional permissions to do this. In another case you can get error such as _"permission denied to access..."_ (in FF) or _"Unsafe JavaScript attempt to access frame with URL ..."_ (in Chrome) for example. – Andrew D. May 07 '12 at 08:01

3 Answers3

1

Try this. It may useful.

http://jsfiddle.net/wV8gF/3/

Pavan Kumar
  • 1,616
  • 5
  • 26
  • 38
  • Yes. it's working fine. i struck my work with this problem since 4days. Tnq Pan. But how can i change the font colors... – Omm May 08 '12 at 13:34
0

The DOM includes a frames collection you can access with JavaScript:

You'd need a name attribute on your iframe tag

<iframe name = "myFrame"
    width="340" scrolling="no" height="37" 
    src="http://www.indiansplash.com/business/include/dash11i.php" 
    id="ifr" hspace="0" marginwidth="0" marginheight="0" vspace="0" 
    style="width: 585px; height: 47px; border: #dddddd 1px solid">
</iframe>

Then you can access it like this:

var myFrame = frames["myFrame"]

You can apply a new stylesheet to the content by following the example here: How to apply CSS to iframe?

UPDATE

Following the example in the reference i cited above:

var cssLink = document.createElement("link") 
cssLink.href = "iframeStyles.css"; /* change this to the url for a stylesheet targetting the iframe */
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['myFrame'].document.body.appendChild(cssLink);

Then in iframeStyles.css:

td{border:1px solid red;} /*or whatever*/

You may need a selector with stronger specificity, or apply !important to styles to overide already existing declarations.

Community
  • 1
  • 1
Faust
  • 15,130
  • 9
  • 54
  • 111
  • But in your answer i dont get how to append a class to td. – Omm May 08 '12 at 13:26
  • You don't need a class on the td to be able to apply styles to it. You can apply the styles to all td's in the iframe with: td{/* style delcarations*/} – Faust May 08 '12 at 13:50
  • Here i want to place two different colors for two td's. in that case your suggestion will not work. – Omm May 08 '12 at 14:16
  • In your case there are 3 td's. The 3rd, fortunately, has an id. So you can apply a style intended for the middle one with td{/*styles*/}, then override this for the first td with td:first-child{/*styles*/}, and finally override for the 3rd td with #change{/*styles*/}. – Faust May 08 '12 at 15:07
0

Try to use the following code:

var my_td = $("#table_id tr td", $("#iframe_ID").contents());

Hope this works... Muhammad.

Muhammad Reda
  • 26,379
  • 14
  • 93
  • 105