实现iframe窗口高度自适应的又一个巧妙思路
domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html
由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条
由于javascript同源策略的限制,无法进行跨域操作,使得问题比较棘手
参考了一下网上的做法,引入了一个代理页面,或者叫做中介 agent.html,属于domainA
然后,在domainB 中的other.html中,再使用iframe将agent.html进行嵌套
好了,现在情况是这样的:
index.html 使用iframe 嵌套 other.html
other.html 使用iframe 嵌套 agent.html
之所以要引入第3个页面agent.html,就是为了遵守“同源策略”的规则,完成不同domain下参数的传递!
我们最终的目的是要去掉滚动条,又要保证被嵌入的页面内容全部得到显示
1.取得other.html页面的实际高度height
2.将height设置到其嵌入的iframe的src属性上
3.在agent.html中截取出所属iframe的src属性中的height值
下面的例子中,使用了一个技巧,避免了使用setInterval()不断去设置iframe的高度
做法是在iframe的src上,附加一个时间戳,让浏览器每次都重新加载agent.html
进而让agent.hml中的js函数invokeMethodInTopWindow()得到执行
domainA 中的2个html
index.html
#{extends 'main.html' /}
#{set title:'Home' /} <hr> <div style="color:red;font-weight:bold">窗口自适应---绕开同源策略的限制,同时又利用同源策略,去掉iframe的滚动条,动态调整窗口的高度,让其能够显示被嵌套页面的所有内容</div>
<!-- 需要动态调整高度的iframe -->
<div style="text-align:center;">
<iframe name="domainB" src="http://127.0.0.1:8088/other" width="80%" scrolling="no" frameborder="0"></iframe>
</div> <script type="text/javascript">
function resize(height) {
//alert("resize");
document.getElementsByName("domainB")[0].height=height;
}
</script>
agent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
我是代理页面哦!
<script type="text/javascript">
window.onload = invokeMethodInTopWindow;
function invokeMethodInTopWindow() {
//alert("调用同域下的函数,重置iframe的高度");
var domainA = document.parentWindow;
var realHeight = domainA.location.hash.split("#")[1];
//last step:调用最上层窗口的函数,重置iframe的高度
parent.parent.resize(realHeight); //alert("realHeight:"+realHeight);
//alert(document.parentWindow.name);//获取容器所在窗口的名称 domainA
//error://alert(document.parentWindow.parent.name); //访问失败 :不能访问domainB
//alert(document.parentWindow.parent.parent.name);//最顶层window属于domainA,因此可以访问
}
//使用不同的时间戳设置iframe的src属性后,就不用使用setInterval()
//setInterval("invokeMethodInTopWindow()",100);
</script>
</body>
</html>
domainB中的other.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onclick="proxy()">
<!-- 被A域所嵌入的页面 -->
<button type="button" onclick="btnClick()">切换显示</button> <div style="display:none">
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
</div>
<div style="display:block">
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
</div> <!-- 反向嵌入A域的页面 -->
<iframe name="domainA" src="" style="display:none"></iframe> <!-- script -->
<script type="text/javascript">
//隐藏或显示div
function btnClick() {
var div = document.getElementsByTagName("div");
for(var i in div) {
if(i<div.length)
div[i].style.display = (div[i].style.display == 'none') ? "block" : "none";
}
}
</script> <script type="text/javascript">
function proxy(){
//alert("btn click");
//获取本页面的高度
var scrollHeight = document.documentElement.scrollHeight;
//alert("滚动条高度:"+scrollHeight);
//将窗口的高度先设置到属于domainA的iframe的src属性上
var iframeDomainA = document.getElementsByName("domainA")[0];
//用domainA的一个页面作为代理,最终的目的是解决“同源策略”的限制
var url = "http://localhost:9000/agent";
/**技巧:通过时间戳让浏览器每次重新加载iframe,这样每次都会自动设置被嵌套的iframe的高度,避免了使用setInterval()*/
iframeDomainA.src = url+ "? time=" + new Date().getTime() + "#" + scrollHeight ;
} window.onload = proxy; </script> </body>
</html>
实现iframe窗口高度自适应的又一个巧妙思路的更多相关文章
- 跨域iframe的高度自适应
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...
- iframe的高度自适应
http://www.cnblogs.com/snandy/p/3902337.html http://www.cnblogs.com/snandy/p/3900016.html Snandy Sto ...
- 同域iframe的高度自适应
引子 父页面里控制子页面 子页面里控制父页面 一.引子 我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 1.html <!DOCTYPE html ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度
摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...
- 让动态的 iframe 内容高度自适应
使用iframe加载其他页面的时候,需要自适应iframe的高度 这里加载了两个不同内容高度的页面至iframe中 1. 没有设置高度 <div class="iframe-wrapp ...
- Jquery-处理iframe的高度自适应
超级简单的方法,也不用写什么判断浏览器高度.宽度啥的.下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的.注意别放错地方了哦. iframe代码,注意要 ...
- 关于iframe的高度自适应问题(js)
function SetCwinHeight() { var cwin=document.getElementById("cwin"); if (document.getEleme ...
- iframe高度自适应
前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...
随机推荐
- web过滤器使用spring依赖注入
1.问题描述 在web项目中,使用filter过滤器十分常见,但是在过滤器中spring Bean即使在配置文件中配置了扫描filter对应的包,也无法正确注入spring 管理的Bean. 2.原因 ...
- [ 原创 ] Java基础8--什么叫做重载
重载是在同一个类中,有多个方法名相同,参数列表不同(参数个数不同,参数类型不同),与方法的返回值无关,与权限修饰符无关,B中的参数列表和题目的方法完全一样了.
- Redis 连接命令
1.AUTH password 验证密码是否正确 2.ECHO message 打印字符串 3.PING 查看服务是否运行 4.QUIT 关闭当前连接 5.SELECT index 切换到指定的数据库
- 【单调队列】BZOJ1342-[Baltic2007]Sound静音问题
[题目大意] 给出一个n个数的序列,以哪位位置为开头的长度为m的区间满足该区间的最大值与最小值的差≤一个定值. [思路] 单调队列……说一下单调队列比较方便的操作. 把第一个先丢进去,开始条件为hea ...
- Siege(开源Web压力测试工具)——多线程编程最佳实例
在英语中,"Siege"意为围攻.包围.同时Siege也是一款使用纯C语言编写的开源WEB压测工具,适合在GNU/Linux上运行,并且具有较强的可移植性.之所以说它是多线程编程的 ...
- elasticsearch中文分词+全文搜索demo
本文假设你已经搭建好elasticsearch服务器,并在上面装了kibana和IK中文分词组件 elasticsearch+kibana+ik的安装,之前的文章有介绍,可参考. mapping介绍: ...
- flash 跨域加载 二次加载
var url2:String = "http://thirdapp0.qlogo.cn/qzopenapp/fa5d80ebf9fc89aaa1d7ddb0e1b861e58d77b409 ...
- 强烈推荐:Android史上最强大的自定义任务软件Tasker
强烈推荐:Android史上最强大的自定义任务软件Taskerhttp://bbs.mumayi.com/thread-28387-1-1.html(出处: 木蚂蚁手机乐园) Android上的Tas ...
- PostgreSQL SystemTap on Linux 转
PostgreSQL 支持动态跟踪, 可以通过dtrace或者systemtap工具统计相关探针的信息. 安装systemtap yum install systemtap kernel-debugi ...
- erlang debug
http://www.cnblogs.com/goldli/archive/2011/03/08/1976998.html erlang 模块文件 helloworld.erl 文件内容: -modu ...