javascripthtmlcss

Can you render a html file into a container?

This is going to sound like an unusual question and I don't know if it's possible but say I have a page with: 

<div class="container container1"></div>
<div class="container conatiner2"></div>

and then in CSS I have for example:

.container1 {
  width: 720px;
  height: 1280px;
}

.container2 {
  width: 1080px;
  height: 1920px;
}

Is there any way to get these containers (.container) to act as individual viewports? So a user could load a separate .html file and it would load inside every .container?

Solution

  • You could do this any number of ways. But the underlying technology would be to use AJAX or the Fetch Web API, pull the page you wish to embed, and place what it returns into the corresponding container. You may need to filter out unneeded markup (stripping out the HEAD and its children, for example). But, it's all very doable.