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分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
随机推荐
- mysql中权限参数说明
1 授权表范围列的大小写敏感性+--------------+-----+-----+---------+----+-----------+------------+| 列 |Ho ...
- sql修改字段长度
语法: alter table <表名> alter column <字段名> 新类型名(长度) 示例:假如有名T1,字段名F1,原来F1为varchar(3),现在要改为va ...
- C语言知识总结(5)
预处理指令 C语言提供的预处理指令主要有:宏定义.文件包含.条件编译 宏定义 不带参数的宏定义 1>一般形式 #define 宏名 字符串 比如#define A 10 2>作用 它的作用 ...
- Revit二次开发-BIM模型导出
最近一个月一直在研究Revit二次开发-BIM模型的导出,在网上找了很多相关资料学习.下面简单介绍一下我最近做的这个BIM模型的导出功能. 开始尝试使用Revit2015的样例程序里提供的读取模型几何 ...
- AMQ学习笔记 - 13. Spring-jms的配置
概述 如何使用spring-jms来简化jms客户端的开发? 这篇文章主要记录如何配置以便以后复用,而非原理的讲解,有些内容我 没有掌握原理. producer端 producer端负责发送,这里使用 ...
- jacob 给word加印的功能
花了两天时间,参考了一些资料,总算是处理好了这样一个技术点. 关键的心得如下: 使用jacob,重点不是jacob本身,而是office的一些API资料.比如需要知道光标的移动, 包括上下左右的mov ...
- java和javascript中this区别的浅探讨
今天在学习javascript的时候碰到了this,感觉它跟java里的有点不一样.然后上网查了一下,参考了这篇文章,JavaScript中this关键字详解,发现它们之间的区别主要是这样: java ...
- Linux mkisofs 创建光盘镜像文件(Linux指令学习笔记)
mkisofs命令 创建光盘文件的系统的命令是mkisofs.光盘系统有多种格式,利用Linux系统提供的光盘文件系统创建 命令mkisofs,可以创建多种iso9660文件系统. 我们一般不用mki ...
- C# 带进度条的文件下载
private long fileLength; private long downLength;//已经下载文件大小,外面想用就改成公共属性 private static bool stopDown ...
- FastDFS4 + Ubuntu12安装及部署
1. 安装libevent 如果需要使用http进行下载,需要安装这个组件. 2. 安装fastdfs 3. 配置fastdfs 4. 安装nginx 问题4.1:安装nginx启动后访问原先资源UR ...