Solved

Change or set css in iframe link

Posted on 2011-09-19
6
241 Views
Last Modified: 2012-05-12
Hi -

I have an iframe that provides a link that I display on my page.

The style does not match my other links on the page so i looks odd.

Is there a way to change the style of a link in jquery so the colors match the others

Thanks
0
Comment
Question by:doctor069
6 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36561635
Are you looking to change the style of the content inside the iFrame? If you are, are you the one providing the content of the iFrame?
0
 

Author Comment

by:doctor069
ID: 36561733
Yes I just want to change the link color. I am providing the content but on a different domain
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36561777
I don't think it is possible.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 30

Expert Comment

by:LZ1
ID: 36561824
If you have full control of the content that you want to style, then all you'll have to do is add some CSS and you should be good.

However, if your calling the iFrame from a different domain and then trying to style it from the domain that was called, your going to have some major security issues to overcome. This is because cross-domain scripting is a huge security risk and is generally not allowed or possible. It "can" be done, but for a simple CSS change, I wouldn't recommend it.
0
 
LVL 11

Accepted Solution

by:
level9wizard earned 500 total points
ID: 36562209
As LZ1 said, for security reasons, it's not possible to use javascript across domains.

There's probably a much simpler, and more reliable solution - it seems strange using an iframe for only one link. Assuming the reason you're doing this because the link is dynamic / changes, I'd want to know:

- if it's possible to use a feed (i.e RSS) or other more direct syndication of this link/content

- as the others suggested, if you have the ability to modify the contained content in the iframe

- if you can't modify it yourself, to ask the host of that link to allow for URL params to adjust the style, i.e. your frame src might look like example.com&style=two

- if it's possible to scrape the page yourself, cache the link on your sever and load it from there

- ask the host of the link if they can make a static 301 URL that always points to that dynamic link. i.e. http://301link.example.com would fwd to http://something-random.example.com/9jd81/rd12/ff-11/
0
 

Author Closing Comment

by:doctor069
ID: 36959946
Sorry for the delay. Used a feed instead
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now