Showing a demo of my CSS on any website
I have developed a small component which can be put in to any website. Now, I want to develop a code that could demonstrate how would my component look like on any website.
So, the person would come to my page and put in his URL and then my code should embed my custom JS/CSS in to the downloaded HTML and display it. Something like this.
Here, like the feedback tab, I want to show my component any where on that page.
In the example you linked, they are requesting the page specified in the
url querystring parameter on the server, and then doing more or less the following steps:
- In the
<head>tag they are adding a
<base href="url" />tag to the document. The
basetag will make any relative links in the document treat the value in the
hrefattribute as their root. This is how they are getting around broken css / images. (The
basetag is supported by all browsers)
- At the end of the document (IE the
- They serve the modified HTML requested to the browser.
All of this is pretty straight forward in implementation. You could use regular expressions to match the
</body> tags for steps 1 and 2 respectively. Depending on the server platform how you actually request the page will vary, but here are some links to get you started: