Rendering Mirrored Website


Today my task is to render the mirrored website. It is very easy task. I choosed iframe to render the websites.
The HTML Inline Frame Element can be used within a normal document body.
So with iframe we just need to use the src attribute to the html file. The src attribute will tell the iframe which html file to load inside of it. The width and height of the iframe will specify the iframe’s viewport width and height.
So here is the Render Website component to render the website which is mirrored

export default class RenderWebsite extends Component {
  componentDidMount() {
    console.log(this);

  }
  render() {
    let {mirroredSite,loading} = this.props;
    let renderConditional = () => {
      if(loading) {
        return (
Loading............

) }else { if(!mirroredSite){ return (

No Url for current User

); 
} 
let format = checkUrl(mirroredSite.url); 
let newUrl = modifyUrl(mirroredSite.url,format); 
//console.log(newUrl,"new url converted one..."); 
return () } 
} 
return ( {renderConditional()}) 
}
}

So this component wasn’t so difficult but more difficulty was to convert the format of the url to point to the correct file whatever html file that is. Next time I will start with Canvas over this to make a drawing board to draw the patterns over the rendered websites.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s