1

I am in the process of creating a site where visitors can preview(not THUMBNAILS!) another url on mypage in an input text box and click on"preview" button-

I am using CURL from php to extract the contents of the site and have divided my page into two halves one for accepting url and the other half which will display the previewed content, basically i do not want image of the url site like GOOGLE.

though the CURL fetches me the contents and I am able to see the content on the preview half what is annoying is the CSS of the previewed html is getting applied across even my page :( since my knowledge of css is very limited can anyone help me with the following

  1. css of the previewed section must not get applied to my part of the page
  2. How to scale down the previewed site just to fit into the preview section of my page.

thanks, Jay

Jay66online
  • 69
  • 1
  • 2
  • 10

1 Answers1

1

Use an iframe to keep the preview site separate from your own. Something like this should work:

<iframe id="preview" src="about:blank"></iframe>

<script>
    function previewUrl(location) {
        document.getElementById('preview').src = location;
    }
</script>
acme
  • 14,654
  • 7
  • 75
  • 109
  • Hi acme, the code you gave works fantastic , and the CSS too is not getting applied to my page. but I still have one problem the css of the iframe preview content needs to be scaled down so that everything looks near readable within the iframe box, can you please help me achieve this? thanks... – Jay66online Jun 15 '12 at 15:33
  • [Take a look at this answer](http://stackoverflow.com/a/3131624/156481), maybe it will give you a hint how it could be done. But I'm not sure if this really works well - haven't tried it so far. – acme Jun 18 '12 at 07:36