iframe大小自适应
前几天,舍友去某互联网公司面前端研发工程师。回来后,他就跟我们聊了下面试官给他出的题。其中,有一道题是“如何实现iframe高度的自适应?”。好吧,我承认,我听到iframe这个词的第一反应就是:这个东西性能差、搜索引擎不友好等等。由于这样的偏见,还真没有好好研究一下iframe。其实,iframe对于第三方的广告插入还是非常有用的。这两天,好好研究了下iframe自适应的问题。研究的过程中,利用nodejs搭建了简单的服务器来测试方法的正确性。
同域下的iframe自适应
同域下实现iframe自适应比较简单,可以直接利用javascript操作DOM来达到目的。下面的示例是在http://localhost:8887作用域下,iframe.html引入index.html。
index.html
1
|
< img src = "ghost.png" alt = "ghost" style = "width:600px; height: 300px;" > |
iframe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< iframe id = "iframe" src = "index.html" frameborder = "0" scrolling = "no" style = "border: 0px;" ></ iframe > < script > // 兼容性代码 function autoHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; iframe.width = iframeWin.document.documentElement.scrollWidth || iframeWin.document.body.scrollWidth; } } } window.onload = function() { autoHeight(document.getElementById('iframe')); } </ script > |
显示效果
注意:一定要通过服务器来访问iframe.html,像chrome这样的浏览器访问本地静态文件会有限制,导致错误!
跨域下的iframe自适应
跨域(只要协议、域名、端口有任何一个不同,都被当作是不同的域)的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的大小。
解决方案原理:使用代理页面,并通过location.hash来进行传值。
示例如下:http://localhost:8887下的一个页面a.html使用iframe标签引入http://localhost:8888下的一个页面b.html。在http://localhost:8887下创建一个agent.html页面做代理,b.html此时可利用隐藏的iframe通过location.hash将自己的大小传给agent.html。由于agent.html与a.html在同一个域下,所以agent.html可直接操作a.html,不受js同源限制。
a.html
1
2
|
// 引入b.html < iframe id = "a_iframe" src = "http://localhost:8888/b.html" frameborder = "0" scrolling = "no" style = "border: 0;" ></ iframe > |
b.html
1
2
3
4
5
6
7
8
9
10
11
12
13
|
< img src = "ghost.png" alt = "ghost" style = "width:600px; height: 300px;" > // 通过隐藏的iframe,利用loacation.hash传值 < iframe id = "b_iframe" src = "http://localhost:8887/agent.html" height = "0" width = "0" frameborder = "0" style = "display: none;" ></ iframe > < script > (function autoHeight() { var width = Math.max(document.body.scrollWidth, document.body.clientWidth); var height = Math.max(document.body.scrollHeight, document.body.clientHeight); var b_iframe = document.getElementById("b_iframe"); b_iframe.src = b_iframe.src + "#" + width + "|" + height; })(); </ script > |
agent.html
1
2
3
4
5
6
7
8
9
10
|
< script > var a_iframe = window.parent.parent.document.getElementById("a_iframe"); var hash_url = window.location.hash; if (hash_url.indexOf("#") >= 0) { var hash_width = hash_url.split("#")[1].split("|")[0] + "px"; var hash_height = hash_url.split("#")[1].split("|")[1] + "px"; a_iframe.style.width = hash_width; a_iframe.style.height = hash_height; } </ script > |
显示效果
结语
iframe大小自适应的更多相关文章
- jQuery解决iframe高度自适应代码
网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...
- iframe高度自适应(同域)
今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...
- iframe高度自适应
前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...
- WebView加载HTML图片大小自适应与文章自动换行
http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...
- iframe高度自适应内容
JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- IFrame 高度自适应的两种方式 .
iframe 高度自适应一般是指: iframe 本身的高度 = 内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...
- 兼容firefox的iframe高度自适应代码
网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
随机推荐
- Oracle之PL/SQL学习笔记
自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了一下,给大家分享,有不足之处还望大家 ...
- 编写atoi库函数
看到很多面试书和博客都提到编写atoi函数,在很多面试中面试官都会要求应聘者当场写出atoi函数的实现代码,但基本很少人能写的完全正确,倒不是这道题有多么高深的算法,有多么复杂的数据结构,只因为这道题 ...
- MySQL常见错误
1. TokuFT file system space is really low and access is restricted 解决方法:修改tokudb_fs_reserve_percent参 ...
- EntityFramework 7 如何查看执行的 SQL 代码?
EF 其他版本:EntityFramework 如何查看执行的 SQL 代码? 在 EF7 中,并没有 Context.Database.Log 属性访问方式,但改变更加强大了,我们可以使用下面方式配 ...
- [c++] Smart Pointers
内存管理方面的知识 基础实例: #include <iostream> #include <stack> #include <memory> using names ...
- android studio 导入有so 文件的项目是,程序崩溃的可能原因
被这玩意坑了2个多小时. ----------------------------------- 由于 android studio 在建项目时,不会自动识别 so 文件,所以在含有so 文件的项目中 ...
- 模拟QQ聊天系统-安卓源代码
利用课余时间随便写的一个小东西,都是一起学习. 先上图: package com.example.nanchen.listviewdemo.adapter; import android.conten ...
- shell调用函数返回值深入分析
编写shell脚本过程中,我们经常会自定义一些函数,并根据函数的返回值不同来执行相应的流程,那么我们如何来获取函数的返回值呢? 首先shell中调用函数有两种方式: 第一种:value=`functi ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- HTML label标签的一点理解
label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦 ...