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

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

说下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. (转)RabbitMQ消息队列(六):使用主题进行消息分发

    在上篇文章RabbitMQ消息队列(五):Routing 消息路由 中,我们实现了一个简单的日志系统.Consumer可以监听不同severity的log.但是,这也是它之所以叫做简单日志系统的原因, ...

  2. 从0开始学习react(一)

    本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...

  3. How to Get Rid of /wordpress/ From your WordPress Site URL

    I brought up a website using wordpress, but I had to visit my website in a way I don't like -- www.e ...

  4. 内核 current宏解析

    Technorati 标签: current thread_info      在内核中,可以通过current宏来获得当前执行进程的task_struct指针.现在来简要分析以下:      最原始 ...

  5. const type& 与 type& 的区别

    const type& 与 type& 是C/C++编程中容易混淆的两个知识点,现在以 cont int& 与 int& 为例讲解: 1.int& 讲解 int ...

  6. 网易面试题:和为n连续正数序列

    题目: 输入一个正数n,输出所有和为n连续正数序列.例如输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以输出3个连续序列1-5.4-6和7-8. 继续做些题目,看到这是网易面试题,于是 ...

  7. windows phone 8 开发系列(二)Hello Wp8!

    上篇我们了解了WP8的环境搭建,从今天开始,我们就正式进入WP8的设计,开发阶段. 一. 项目模板介绍 打开vs,选择Windows Phone的项目模板,我们发现如下有很多模板,那么我们就从认识这些 ...

  8. 如何更改Json.NET的序列化规则

    我想要使序列化出来的JSON都是小写,可以通过建立 LowercaseContractResolver:DefaultContractResolver 来实现, 创建Custom ContractRe ...

  9. 【风马一族_git_github】git与github的英文记录

    Pull requests  Issues Gist 请求 问题 要点 ---------------------------------------------------------------- ...

  10. float闭合(清除浮动)和CSS HACK

    一.float 闭合(清除浮动) 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. <style>.c ...