iframe自适应之广告设计

网页为了赚钱，引入广告是很正常的事了。通常的做法就是使用 iframe，引入广告地址就可以了，然后根据广告内容设置相应的显示框。但是，为什么是使用 iframe 来进行设置，而不是在某个 div 下嵌套就行了呢？要知道，广告是与原文无关的，这样硬编码进去，会造成网页布局的紊乱,而且,这样势必需要引入额外的 css 和 js 文件，极大的降低了网页的安全性。这些所有的弊端，都可以使用 iframe 进行解决。 我们通常可以将 iframe 理解为一个沙盒，里面的内容能够被 top window 完全控制，而且，主页的 css 样式是不会入侵 iframe 里面的样式，这些都给 iframe 的广告命运埋下伏笔。可以看一下各大站点是否都在某处放了些广告，以维持生计比如:W3School 但，默认情况下，iframe 是不适合做展示信息的，所以我们需要对其进行 decorate.

默认情况下，iframe 会自带滚动条，不会全屏.如果你想自适应 iframe 的话:

第一步：去掉滚动条

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

第二步,设置 iframe 的高为 body 的高

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

还可以添加其它的装饰属性:

举个例子：

<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>

你可以直接写在内联里面，也可以在 css 里面定义，不过对于广告 iframe 来说，样式写在属性中，是 best pratice.

结束语：

以上就是 ifram 自适应之广告设置的全部介绍，希望对大家有用。更多前端技术干货敬请关注码云笔记。友情推荐阅读《iframe 安全性探索》