iframe嵌入其他网站,如何自适应高度
终于有一周时间,工作不那么忙了,腾出手来总结下工作过程中学到的知识。
每天遇到新问题,解决新问题,但是却很少有时间去仔细研究下,或者总结下。攒的多了,就得从头捋一遍。
说下iframe自适应高度:
搜一下这个关键词,网上一大堆,我没遇到过那么多问题,所以看那些文章真的很没耐心,目前阶段就是用到什么学什么,这样学的快记得深。用不到的知识,学的快,忘的快。
我们的网站作为平台需要将其他网站作为一个应用嵌入进来,并通过单点登录验证。那么问题来了,对方网站每个模块页面高度不同,有的是用瀑布流形式刷下来的,所以我这里无法将iframe的高度定死,必须自适应对方页面的高度。
思路:
对方页面载入后,拿到对方页面的高度,然后把我的iframe高度设置成它的高度,一切就ok了。
问题一:拿到对方页面的高度
首先这就是最大的问题,js不能跨域获取对方页面的页面元素。那么什么是“跨域”:跨域问题是由于javascript语言安全限制中的“同源策略”造成的。
简单来说,“同源策略”是指一段脚本只能读取来自同一来源的窗口和文档的属性,同一来源:主机名、协议和端口号的组合。
也就是说,正常情况下,浏览器不允许我拿到它。很不爽!!!
好,想办法——>我既然不能拿到,那能不能让对方传给我呢?因为是和对方合作,所以能够联系到对方帮忙做些改动,但是该如何改动呢?
一、对方页面在完全被载入后,获取自己的页面高度;
二、对方页面中引用一个我的页面,该页面在对方应用中并不展示,作为隐藏的部分,并把高度赋给该引入页的标签值
三、我的被引入页面需要获取传入的高度,并将最外面的iframe的高度进行调整

网页嵌套结构图:

setInterval(function(){},200);js函数,每隔200毫秒执行前面参数的方法。
location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。
关键:
var a_iframe = parent.parent.document.getElementById("a_iframe");
实现了在对方页面里获取了我网页的iframe,因为是同一个域所以能获取到。这样达到了“对方页面获取自己的高度,并通知我”这个目的。
朋友说用jsonp也可实现,待后续更新……
iframe嵌入其他网站,如何自适应高度的更多相关文章
- js实现iframe自适应高度
转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
- iframe自适应高度的多种方法方法小结(转)
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...
- Html-Css-iframe的自适应高度方案
先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> ...
- iframe自适应高度(转)
iframe自适应高度 (2013-04-23 17:29:49) 标签: iframe 高度 自适应 js 杂谈 分类: 网页制作 有时候我们的网站需要引入其他网站的东西,比如评论,这时候就需要使用 ...
- 通过Iframe在A网站页面内嵌入空白页面的方式,跨域获取B网站的数据返回给A网站!
以下代码只是为演示该方法具体是如何操作的,实际的意义并不大. 其实这个方法还可以解决很多方面的跨域操作,以下两点为我工作中遇到的情况! 比如A系统中打开B系统页面的时候,获取B系统页面高度,A系统中可 ...
- jquery 清空 iframe 的内容,,iframe自适应高度
$(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...
- 【转】jquery iframe取得元素与自适应高度
今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
随机推荐
- js利用数组length属性清空和截短数组
1.使用length清空数组: 代码如下 复制代码 <script> var arr1 = ['aaa','bbbb','http://www.111cn.net']; ale ...
- ocx在我indows7无法注册
公司今天用到一个 要用到ocx ,我调试好久都无法安装..... 后来在网上看到.原来是没有安装 VC Redist Installer(VC20052008201020122013)运行库合集 导 ...
- 追访现代主流程序员的家庭事业观---禅宗派程序员KUROKY
Kuroky,一个被人遗忘的当代主流程序员. 在他的内心深处有着怎样的心路历程 他的快乐与悲伤,都是一个禅 独家专访kuroky: 记者:作为现代主流程序员,你内心的苦楚玉欢乐通过什么来发现? 大师: ...
- Movie importing requires quicktime
在Unity中使用MovieTexture播放视频会碰到movie importing requires quicktime的错误,解决方法如下: 1.关闭Unity安装QuickTime播放器,打开 ...
- 一个小makefile程序
刚刚开始学习linux下的程序,总需要自己写一些小型的makefile文件,这里给出一个makefile的例子,方便以后借鉴. 程序包含了main.c(需要头文件input.h 和 display.h ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- ThinkPHP中的模型二
ThinkPHP中的模型 1.为什么要创建数据对象 案例:使用ThinkPHP完成部门管理 ① 设计数据库 ② 创建Dept控制器 路径:./Application/Admin/Controller创 ...
- Java 字符流实现文件读写操作(FileReader-FileWriter)
Java 字符流实现文件读写操作(FileReader-FileWriter) 备注:字符流效率高,但是没有字节流底层 字节流地址:http://pengyan5945.iteye.com/blog/ ...
- 《iptables详解 》RHEL6
iptables详解 Iptables原理 现在防火墙主要分以下三种类型:包过滤.应用代理.状态检测 包过滤防火墙:现在静态包过滤防火墙市面上已经看不到了,取而代之的是动态包过滤技术 ...
- 一个Ctrl+V下的问题
对于电脑快捷键来说恐怕没什么比Ctrl+C和Ctrl+V更熟悉的了. 最近做了一个小程序,界面上有一个文本框,要做的事情就是把从别的地方复制内容后粘贴到文本框中,然后以自己处理后的格式显示出来. 为了 ...