CODEWITHSUNDEEP
javascriptcssmobile
Aaron Henderson
Aaron Henderson

Reputation: 191

Apply custom JS and CSS to iframe? (To make 3rd party mobile site)

I want to create a "mobile" version of a site that I frequent often. Though much debate I decided an iframe in which I inject JS and CSS would probably be my best bet. I decided to do a Google Search and I get well over 7 million results with no real way of doing what I seek, mearly theories of how it could be done.

Is there a way to do this? Or is there a better way to create a mobile 3rd party version of a website I frequent?

Upvotes: 0

Views: 338

Answers (3)

Ryan Terwedo
Ryan Terwedo

Reputation: 28

This is 100% possible with a proxy rewrite tool. Essentially a "gresemonkey proxy" that loads the 3rd party content, and the you can edit it in the server and display the edited content to the user. Like others said this is a grey area, especially for commercial use, and there is a good chance of getting sued if you do not have permission.

We use this tech to do just what you ask (with permission from the site) to create mobile versions without changing the owners code for internal use.

This is extremely involved, so greasemonkey is a good first step...

Upvotes: 0

Jim
Jim

Reputation: 73966

No, this isn't possible. You can't tamper with the contents of an iframe if it originated from a different hostname for security reasons.

If this is for your own personal use, I would suggest user stylesheets and user JavaScript. There are extensions/plugins for most browsers that do this, for example GreaseMonkey for Firefox.

If you want other people to be able to visit the site, you'd have to hook into an API they offer or scrape the content, then republish it from your own server. This would be copyright infringement if you did it without their permission though.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You cannot manipulate a 3rd part site in an Iframe due to the Same Origin Policy. To manipulate the page the way you want you'd need to fetch it on a proxy server, change the HTML, the re-serve it up to the client.

Upvotes: 0

Related Questions