呈现 HTML 页面预览

Question

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

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>

Answer 2

使用 jQuery 你可以做如下事情：

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

呈现 HTML 页面预览

Rendering HTML page preview

html

css

jquery

preview