Change css for page in iframe

Posted on 2007-07-22
Last Modified: 2007-11-27

I would like to change the style sheet for a third-party (remote) website I have inside of an IFRAME.

For example I would like to manipulate Google:

-- I want all images to have a red border around them
-- I want the color of all text links to be green

<title>Google in an IFRAME</title>
<iframe src="" width="700" height="500" frameborder="0" scrolling="auto"></iframe>
Question by:hankknight
    LVL 30

    Accepted Solution

    can't be done for security reasons.
    LVL 1

    Assisted Solution

    I've did something similair. As said before, it can not be done in Javascript due to securty reasons. If the page inside the iframe was one the same domain as the page which holds the iframe, only then would this be possible using Javascript.

    So, I did it on the server side using a JSP

    In the iframe I call a JSP file, which reads the HTML from the specified URL and simply outputs it. Fairly simple: Since this JSP is inside the same domain my Javascript is now allowed to access anything inside the iframe.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    734 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

    22 Experts available now in Live!

    Get 1:1 Help Now