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也可实现,待后续更新……

时间: 2024-07-29 20:20:31

iframe嵌入其他网站,如何自适应高度的相关文章

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

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的. 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(ob

iframe自适应高度

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的,不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: function SetWinHeight(obj) { var win=obj; if (documen

iframe自适应高度的多种方法

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj

js实现iframe自适应高度

转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 1 2 functio

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

先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>1.html</title> </head> <body> <iframe id="ifr" src="b.html" framebord

跨域下iframe自适应高度

最近在做一个需求,需求大致背景:页面中iframe嵌入另一家公司的列表页 博主的第一反应就是“very easy!”,so,挽起双袖开始敲代码 结果出现问题了,iframe跨域,无法获得内嵌页面的高度,因此出现的上下滚动条,so难看! 于是上网找大神,皇天不负有心人啊,终于找到了,激动之情无以言表.... 故事背景交代完毕 /******************************华丽的分割线,哈哈****************************/ 大神的例子大致是这样的: 假设ww

jquery iframe取得元素与自适应高度

总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在iframe子页面获取父页面元素 $('#objId', parent.document); 在iframe子页面获取父页面元素 代码如下:  代码如下 复制代码 $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页面的元素代码如下:  代码如

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

以下代码只是为演示该方法具体是如何操作的,实际的意义并不大. 其实这个方法还可以解决很多方面的跨域操作,以下两点为我工作中遇到的情况! 比如A系统中打开B系统页面的时候,获取B系统页面高度,A系统中可以动态设置窗口的高度 还有A系统中打开B系统页面的时候,B系统页面进行一系列操作,操作成功后需关闭A系统窗口,就可以在操作成功后再在B系统中嵌入A系统的blank.html页面,blank.html页面打开的时候,动态关闭A系统的窗口! 下面为大家讲下是如何实现该方法的 1.在A系统下添加名称为bl

网页制作技巧:iframe自适应高度

转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条. 我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的.而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题.另外,在兼容性方面,也研究的不彻底. 这篇文章,希望在这两个方面再做一些深入. 可能有人还没接触到