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

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

说下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. “尝试加载 Oracle 客户端库时引发 BadImageFormatException”的解决方案

    今天要写个程序,环境是win8.1+ vs2012+ oracle,可是却出现了一个意想不到的问题: 异常!以下为数据库提示详细错误信息:尝试加载 Oracle 客户端库时引发 BadImageFor ...

  2. 20141031--SQL分组,数学函数,聚合函数

    /* 通过代码操作:创建一个数据库,里面有一个学生信息表, 内容包括:学号,姓名,性别,体重,年龄,语数外三门课分数,班级 插入20条数据 执行以下查询操作: 1.查姓王的同学的信息 2.分别查每门课 ...

  3. MySQL 5.7 Zip 安装(win7)

    参考官方文档 http://dev.mysql.com/doc/refman/5.7/en/windows-install-archive.html 2.3.5.1 Extracting the In ...

  4. Codevs 1063 合并果子

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond     题目描述 Description 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分 ...

  5. template_12特化与重载

    1,重载函数模板f<int*>((int*)pi);//1f<int>((int*)pi);//2上面用int*替换第一个模板的T,用int来替换第二个模板的T.那么将得到两个 ...

  6. UINavigationController的popViewControllerAnimated问题

    UINavigationController是IOS编程中的一个view controller的容器,通过栈管理viewControllers,每一次push操作都将在栈顶添加一个view contr ...

  7. C语言1-100连加,求质数,算瑞年检测字母大小写,登录系统

    #include <stdio.h> void test(){//1+2+3+4+.....+100 int a,b; a=0; b=0; for ( ; a<=100; a++) ...

  8. 在指定的DSN中,驱动程序和应用程序之间的体系结构不匹配

    今天在使用plsql通过odbc导入excel数据时发生了一个错误,截图如下: 错误提示为:驱动程序和应用程序之间的体系结构不匹配. 后来百度了一下,得出答案.系统是win10 64位.excel驱动 ...

  9. mac OS X下git代码行统计命令

    1.统计某人的代码提交量,包括增加,删除 git log --author=-- --until=-- --pretty=tformat: --numstat | awk '{ add += $1 ; ...

  10. 判断php数组维度的小例子

    分享一例判断php数组维度的代码,供大家参考. 如下所示: <?php /** * 返回数组的维度 * @param [type] $arr [description] * @return [t ...