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分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
随机推荐
- jsp中页面间传汉字参数转码
转码:a.href="./showCont.jsp?tcontent="+encodeURI(encodeURI(tcontent)); 解码:java.net.URLDecode ...
- WPF密码框中禁止复制、粘贴
如题: " Margin="215,32,151,0" > <PasswordBox.CommandBindings> <CommandBindi ...
- 转载:python文件打开方式详解——a、a+、r+、w+区别
第一步 排除文件打开方式错误: r只读,r+读写,不创建 ###f.readline()是读取第一行,f.readlines()是读取全部并返回一个列表 w新建只写,w+新建读写,会将文件内 ...
- XForms标准介绍
XForms标准是真正实现展现与模型分离的.与客户端无关的展现服务标准. 1.XForms标准 XForms是W3C组织所推荐的下一代在线展现服务标准(早在2003年10月14日就被W3C推荐),它吸 ...
- JAVA:类的三大特征,抽象类,接口,final关键字<3>
一.类的三大特征 1.封装性 (1).什么是封装 封装就是把抽象出的数据和对数据的操作封装在一起, 数据被保护在内部, 程序的其他部分只有通过被授权的操作(成员方法), 才能对数据进行操作. (2). ...
- 济南学习 Day 1 T2 am
死亡[问题描述]现在有M个位置可以打 sif,有N +1个人在排队等着打 sif.现在告诉你 个人每个人需要多长的时间打 sif,问你第N +1个人什么时候才能打 sif. (前N个人必须按照顺序来) ...
- 运行maven报错:经过检查是因为maven不兼容jdk1.6,重新安装1.7解决
cmd mvn -v报错: Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apach ...
- 使用inotify检测linux目录内文件变化
#include <unistd.h> #include <sys/inotify.h> #include <stdio.h> #include <error ...
- String 两种实例化方式的区别
package com.java1234.chap03.sec08; public class Demo3 { public static void main(String[] args) { //1 ...
- html关于强制显示 隐藏浏览器的滚动条
浏览器的滚动条在一些特殊的展示中,是不需要的,所以必须把它隐藏掉,文章主要介绍一些隐藏或者显示IE的水平或者垂直滚动条的实现代码,需要了解的朋友可以参考下: 相关css代码如下: //强制显示滚动条: ...