呈现HTML页面预览

Question

我想在另一个页面的元素中显示完整HTML页面的预览。整个页面应该以小型200x200的形式显示。实现这一目标的正确方法是什么？

- Erik

---

这段描述准确地说明了我的意图。 在页面y上展示HTML页面x，以200像素乘200像素的div形式呈现页面x的所有内容（类似于预览）。我不是在寻找一种加载页面x的HTML的方法，而是需要CSS来显示完整页面在一个小div中的方法。 - Erik

请提供您已经尝试过的代码片段... - Eko Junaidi Salam

Answer 1

请看这个：

请检查一下：

.preview {
    width:600px; height:400px;
    -webkit-transform:scale(.25);
    -ms-transform:scale(.5);
    transform:scale(.5);
    -webkit-transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    transform-origin:0 0; 
    border:4px solid blue;
    margin:0 0 -300px 0;
}

<iframe class="preview" src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

- Eko Junaidi Salam

---

@Erik “我知道如何将内容加载到iframe或div中。我的挑战是正确缩放它，以便在小的div中显示完整页面预览。” 那么这应该是被接受的答案。 - Drakes

Answer 2

使用jQuery，您可以这样做：

$("div selector").load("url-location-other-page.html", function() {
  alert("Showing a nice message after loading has finished.");
});

- Tys