企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

iframe自适应之广告设计

JavaScript笔记 码云 29℃ 0评论

网页为了赚钱,引入广告是很正常的事了。通常的做法就是使用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;

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

属性 效果
allowtransparency true or false<br>是否允许iframe设置为透明,默认为false
allowfullscreen true or false<br>是否允许iframe全屏,默认为false

举个例子:

<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安全性探索

转载请注明:码云笔记 » iframe自适应之广告设计

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址