最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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;

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » iframe自适应之广告设计

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发