iframe 充满屏幕
While the iframe element has many potential uses, it does have one feature that is particularly appealing to designers.
尽管iframe元素有很多潜在用途，但确实具有一项对设计人员特别有吸引力的功能。
Traditional site screenshots are frozen in time: as static images, they cannot show animation or the results of ongoing development. In an age of advanced CSS and CMS controls, static portfolio images no longer reflect the work of modern web designers.
传统的网站屏幕截图会及时冻结 ：作为静态图像，它们无法显示动画或正在进行的开发结果。 在高级CSS和CMS控件时代，静态投资组合图像不再反映现代Web设计师的工作。
You can use the iframe element to provide live, always-up-to-date screenshots of your sites, but there are three challenges when doing so: removing scrollbars from the iframe, sizing the result appropriately on your portfolio page, and linking to the real site.
您可以使用iframe元素来提供网站的实时实时最新屏幕截图，但是这样做存在三个挑战：从iframe删除滚动条，在投资组合页面上适当调整结果的大小，以及链接到真实网站。
制作无缝的iframe (Making a seamless iframe)
Integrating iframe content onto a web page commonly produces scrollbars within the element, as the referenced content is usually larger than the frame itself. If you prefer to turn the scrollbars off, there are a few ways of doing so. Officially, there is the HTML5 seamless attribute:
将iframe内容集成到网页上通常会在元素内产生滚动条，因为所引用的内容通常大于框架本身。 如果您想关闭滚动条，则有几种方法可以关闭。 正式地，有HTML5 seamless属性：
<iframe seamless src="/samples/skullduggery.html"></iframe>Unfortunately, no browser currently supports this feature. It would be my personal recommendation to leave it in place for future compatibility, adding appropriate CSS to achieve the same result in Firefox via an attribute selector:
不幸的是，当前没有浏览器支持此功能。 我个人建议将其保留以备将来使用，并添加适当的CSS以通过属性选择器在Firefox中获得相同的结果：
iframe[seamless] {
overflow: hidden;
border: none;
}Oddly, that’s still not enough for Chrome, Safari or IE, which continue to follow the outdated scrolling attribute. Adding that expands our HTML code:
奇怪的是，对于仍然遵循过时scrolling属性的Chrome，Safari或IE而言，这还远远不够。 添加可扩展我们的HTML代码：
<iframe seamless src="/samples/skullduggery.html" scrolling="no"></iframe>
<iframe src="/samples/autumn-leaves.html" seamless scrolling="no"></iframe>
<iframe src="/samples/resume.html" seamless scrolling="no"></iframe>Note that scrolling is obsolete in the HTML5 spec, and adding the attribute to your code will render your page invalid. Unfortunately there’s no way to avoid that at the moment.
请注意，在HTML5规范中scrolling已过时，将属性添加到代码中将使页面无效。 不幸的是，目前无法避免这种情况。
iframe宽度 (iframe widths)
Reducing the width of the <iframe> element will have the same result as narrowing the browser on the actual page: HTML content in the window will either reflow or be cut off. One of the nice side-effects of this is that media queries in a page targeted in an iframe will continue to operate in that context. (You can see this to a limited degree in the iframes above… with the promise of seeing lot more in the redesign of this blog in the new year).
减小<iframe>元素的宽度将具有与缩小实际页面上的浏览器相同的结果：窗口中HTML内容将重排或被截断。 这样做的一个很好的副作用是， 以iframe为目标的页面中的媒体查询将在这种情况下继续运行。 (您可以在上述iframe中在一定程度上看到这一点……并有望在新的一年中重新设计此博客，从而看到更多)。
If responsive sites were the subject of your portfolio, I’d recommend that that you place a percentage width for any iframe that contains a responsive page, as doing so neatly demonstrates the behaviour of the targeted sites to the visitor. If you wanted to scale the targeted page regardless of its internal behaviour, the CSS gets a little tricky; I’ll address the code for that in a future article.
如果响应式网站是您投资组合的主题，则建议您为包含响应式页面的所有iframe放置一个百分比宽度，因为这样做可以向访问者轻松展示目标网站的行为。 如果您想要缩放目标页面而不考虑其内部行为，则CSS会有些棘手；因此，请参见参考资料。 我将在以后的文章中讨论该代码。
连结iframe (Linking iframes)
Links inside of iframes will operate in the context of that frame, but it is reasonable for visitors to expect links to open in a full window. There are a few ways of achieving this:
iframe内部的链接将在该框架的上下文中运行，但是让访问者期望链接在一个完整的窗口中打开是合理的。 有几种方法可以实现此目的：
If you have control over the source of the targeted page, you could add this code inside the <head>:
如果您可以控制目标页面的源代码，则可以将此代码添加到<head> ：
<base target="_parent">This will make no difference to links in the page under normal circumstances, but will “blow out” if a hyperlink is clicked in the context of an iframe. You can see this in action in the “Skullduggery Inc.” link on the first iframed example on this page, which jumps to the article that inspired it.
在正常情况下，这对页面中的链接没有任何影响，但是如果在iframe的上下文中单击超链接，则将“弹出”。 您可以在“ Skullduggery Inc.”中看到这一点。 此页面上第一个iframed示例的链接，该链接跳转至启发该示例的文章。
As one of the very few justifications for opening links in a new window or tab, you could also do this:
作为在新窗口或新选项卡中打开链接的极少数理由之一，您还可以执行以下操作：
<base target="_blank">Generally speaking opening links in a new window breaks the UI expectations, of visitors, but iframes provide one of the very rare exceptions to the rule.
一般来说，在新窗口中打开链接会破坏访问者对UI的期望，但是iframe是该规则中非常罕见的例外之一。
What if the iframe has no visible links to click on, as in the example of falling leaves at the top of this article? Or what if you want a click anywhere on the screenshot to take the visitor to the relevant site? A link around the iframe won’t work; you have to use a different approach. First, we’ll place the appropriate link after the iframe, and wrap it all in a div:
如果iframe没有可见的链接可以单击该怎么办(如本文顶部的落叶示例)？ 或者，如果您想单击屏幕快照上的任意位置以将访问者带到相关站点，该怎么办？ iframe周围的链接不起作用； 您必须使用其他方法。 首先，我们将适当的链接放在iframe ，并将其全部包装在div ：
<div id="framer">
<iframe src="/autumn-leaves.html" seamless scrolling="no"></iframe>
<a href="/604/Seasonal-CSS-Falling-Leaves"></a>
</div>Then, we use the good old absolutely-positioned-element-inside-a-relative-container trick to ensure that the link covers the entire area of the <iframe>:
然后，我们使用一个很好的旧的绝对定位元素在一个相对容器里面来确保链接覆盖<iframe>的整个区域：
div#framer {
position: relative;
}
div#framer iframe {
width: 100%;
}
div#framer a {
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
}This covers all the behaviours that one would expect from a portfolio screenshot, with the added advantage of a live, constantly updated view of the site. Naturally, you will need to keep an eye on any linked sites to ensure that they remain online; if those sites run on a CMS, you should also be aware of any changes that the client makes to the design or content.
这涵盖了从投资组合屏幕快照中期望的所有行为，并具有实时，不断更新的网站视图的附加优势。 自然，您将需要密切注意任何链接的站点，以确保它们保持在线状态； 如果这些网站在CMS上运行，则还应该注意客户端对设计或内容进行的任何更改。
翻译自: https://thenewcode.com/631/Use-iFrames-To-Create-Real-Time-Portfolio-Screenshots
iframe 充满屏幕
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
