终于有一周时间,工作不那么忙了,腾出手来总结下工作过程中学到的知识。

每天遇到新问题,解决新问题,但是却很少有时间去仔细研究下,或者总结下。攒的多了,就得从头捋一遍。

说下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嵌入其他网站,如何自适应高度的更多相关文章

  1. js实现iframe自适应高度

    转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...

  2. iframe自适应高度的多种方法方法小结

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...

  3. iframe自适应高度的多种方法方法小结(转)

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  4. Html-Css-iframe的自适应高度方案

    先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> ...

  5. iframe自适应高度(转)

    iframe自适应高度 (2013-04-23 17:29:49) 标签: iframe 高度 自适应 js 杂谈 分类: 网页制作 有时候我们的网站需要引入其他网站的东西,比如评论,这时候就需要使用 ...

  6. 通过Iframe在A网站页面内嵌入空白页面的方式,跨域获取B网站的数据返回给A网站!

    以下代码只是为演示该方法具体是如何操作的,实际的意义并不大. 其实这个方法还可以解决很多方面的跨域操作,以下两点为我工作中遇到的情况! 比如A系统中打开B系统页面的时候,获取B系统页面高度,A系统中可 ...

  7. jquery 清空 iframe 的内容,,iframe自适应高度

    $(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...

  8. 【转】jquery iframe取得元素与自适应高度

    今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...

  9. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

随机推荐

  1. 二叉树-你必须要懂!(二叉树相关算法实现-iOS)

    这几天详细了解了下二叉树的相关算法,原因是看了唐boy的一篇博客(你会翻转二叉树吗?),还有一篇关于百度的校园招聘面试经历,深刻体会到二叉树的重要性.于是乎,从网上收集并整理了一些关于二叉树的资料,及 ...

  2. 【学习笔记】【C语言】第一个C程序

    1.新建C语言程序 *打开Xcode  *新建文件  *选择C语言程序  *输入程序名称  *选择存放路径  *创建完成后  2.也可以用终端来创建  通过指令来创建.c文件   3.编写代码  4. ...

  3. 3D球状标签云(兼容IE8)

    看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...

  4. CICS&&XA

    CICS (Customer Information Control System) 是IBM 公司的强大主机交易服务器.集成平台,在全球C.C++.COBOL等交易中间件市场上占有绝大多数客户.CI ...

  5. sizeWithFont方法被弃用了,该怎么办?

    之前使用了NSString类的sizeWithFont:constrainedToSize:lineBreakMode:方法,但是该方法已经被iOS7 Deprecated了,而iOS7新出了一个bo ...

  6. if语句代码优化

    if($sum==7){ $sz+=135; }elseif($sum==5){ $sz+=80; }elseif($sum==6){ $sz+=97; }elseif($sum==4){ $sz+= ...

  7. 基础学习总结(五)---baseAdapter、ContentProvider

    小写转大写 : ctrl+shift+F <ScrollView></ScrollView>滚动条显示视图 ListView与BaseAdapter: public class ...

  8. 51nod1269 B君的圆锥

    1629 B君的圆锥 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 B君要用一个表面积为S的圆锥将白山云包起来.   B君希望包住的白山云体积尽量 ...

  9. 重绘panel控件,实现panel的阴影效果

    最近想在项目中添加一个要有阴影的panel控件,找了好多资料,最后通过采用图片的方式实现了panel的阴影效果,效果图如下: 重绘代码如下: using System; using System.Co ...

  10. Django Form的学习

    django.forms 是Django处理form的库      本质上可以直接通过对HttpRequest达到同样的效果,但是django.from带来更便捷的处理方式.功能有几点 通过form类 ...