/    Sign up×
Community /Pin to ProfileBookmark

Edit IFrames CSS From External Page?

Hey guys ?,

Just wondering, if it is possible to edit a pages CSS for outside the page (eg a IFrame)?

I have a page that contains an IFrame, and i have no control over the page inside the iframe, heres an example:

[CODE]
<html>
<head>
<style>
#googleiframe {
border:1px solid red;
cursor:crosshair;
}
</style>
</head>
<body>
<iframe src=”http://www.google.com” id=”googleiframe”></iframe>
</body>
</html>
[/CODE]

Just wondering if it is possible to edit google.com from that page (even if i end up using javascript or php, whatever i just need it done).

Thanks,
aNdreW ?

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@ray326Apr 24.2006 — Hey, it's just programming so you can do it with either Javascript or a server language. In the latter case you wouldn't wind up with an iframe on the page. In the former you'd need to use the DOM and the user would have to have Javascript enabled.

Oh, and there might be some question regarding copyright infringement on your part.
Copy linkTweet thisAlerts:
@robo_neojetsamauthorApr 25.2006 — Hey, it's just programming so you can do it with either Javascript or a server language. In the latter case you wouldn't wind up with an iframe on the page. In the former you'd need to use the DOM and the user would have to have Javascript enabled.

Oh, and there might be some question regarding copyright infringement on your part.[/QUOTE]


Do you know how you would do it with javascript?
Copy linkTweet thisAlerts:
@ray326Apr 25.2006 — I have an idea how to start but you'd be better off asking in the Javascript forum since this isn't really a CSS issue.
Copy linkTweet thisAlerts:
@robo_neojetsamauthorApr 25.2006 — ok, ive tryed with javascript and havent been successful, before i post this topic onto the javascript board, can you please tell me your ideas.
Copy linkTweet thisAlerts:
@ray326Apr 25.2006 — I'd start by using the iframe as a hidden transfer medium from which I'd copy the "interesting" bits of the page into a div for display. In that case, the local stylesheet applies. Google for "inner browsing" for a description of the technique, which requires you to have control over the external content. You'd have to figure out how to determine when and if the iframe completed loading since you don't control the external page.
Copy linkTweet thisAlerts:
@robo_neojetsamauthorApr 26.2006 — so what your saying, is something like you have a script copy the page's HTML from the hidden iframe to a textbox or div, and have a javascript or PHP script edit the HTML as needed, then show the edited html in another iframe.
Copy linkTweet thisAlerts:
@ray326Apr 26.2006 — An iframe isn't required to display it. One flow would be like so.

[ext source]-->[hidden iframe]--(body innerHtml)-->[div innerHtml]

Here's some of my old supporting Javascript for the main page.
<i>
</i>/* main doc support for "Inner Browsing" content loading */

function loadDiv(doc, divId) {
document.getElementById(divId).innerHTML=doc.getElementById(divId).innerHTML;
}

function newsTransfer(doc) {
document.getElementById("news").innerHTML=doc.getElementById("thenews").innerHTML;
}

function getNews(url)
{
document.getElementById("xfer").src = url
}

×

Success!

Help @robo_neojetsam spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...