利用location.hash实现跨域iframe自适应高宽
作者:heiniu 来源:ued.alimama 发布时间:2009-08-02 20:31:00
页面域关系:
主页面a.html所属域A:www.aspxhome.com
被iframe的页面b.html所属域B:www.cidianwang.com,假设地址:http://www.cidianwang.com/b.html
实现效果:
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.
问题本质:
js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.html的高度和宽度.
解决方案:
引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.aspxhome.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.
代码如下:
a.html代码
首先a.html中通过iframe引入了b.html
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.cidianwang.com/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>
b.html代码
<script type=”text/javascript”>
var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
var c_iframe = document.getElementById(”c_iframe”);
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //https://www.aspxhome.com/c.html#width|height”
}
</script>
<!–js读取b.html的宽和高,把读取到的宽和高设置到和a.html在同一个域的中间代理页面车c.html的src的hash里面–>
<iframe id=”c_iframe” height=”0″ width=”0″ src=”https://www.aspxhome.com/c.html” style=”display:none” ></iframe>
c.html代码
<script type=”text/javascript”>
var b_iframe = parent.parent.document.getElementById(”b_iframe”);
var hash_url = window.location.hash;
var hash_width = hash_url.split(”#”)[1].split(”|”)[0]+”px”;
var hash_height = hash_url.split(”#”)[1].split(”|”)[1]+”px”;
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
</script>
a.html中的iframe就可以自适应为b.html的宽和高了.
其他一些类似js跨域操作问题也可以按这个思路去解决
猜你喜欢
- asp压缩access数据库,具体asp代码见下: Class DatabaseTools &n
- 在自己的网站主页上增加社会化分享按钮,是有效提高自己网站流量的一种方法。今天我在无争围棋网上增加了社会化按钮,根据我个人的习惯,我选择了豆瓣
- 设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面,足矣?或许五年前是吧!现在
- 当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求,SAAS的模式看起来非常有吸引力。Web应用程序的界面设计,其核心
- 作者:JavaScript Kit译者:子乌(Sheneyan)翻译日期:2006-02-12英文原文:Conditional Compil
- 如何使用Office Chart 9.0 制作图表?代码如下:chart90.asp<HTML><HEAD><
- 在使用DB2以来,碰到了几次出现提示SQL1032N错误,每次出错时出错信息大概如下:11/21/2004 22:15:33 0 0 SQL
- 今天在群(CSS森林:30247792)里讨论了border的样式写法,发现border的写法还真是灵活,做了一下总结,希望对大家有用:bo
- 一、Sql Server中的日期与时间函数 1. 当前系统日期、时间 select getdate() 2. dateadd 在向指定日期加
- 一、问题的提出随着互连网的发展,网站的数量以惊人的数字增加。网站的作用除了给广大网友们提供信息资讯服务外,还应该成为网友们上传与下载文件的场
- ▲ SHOW执行下面这个命令可以了解服务器的运行状态mysql >show status;该命令将显示出一长列状态
- li {list-style-image: url(images/disc.gif);}li的这个样式定义是将列表项目使用图片来代替显示的小
- ChatGPT 是 OpenAI 开发的 GPT(Generative Pre-trained Transformer)语言模型的变体。它是
- XMLHttpRequest 最近在 W3C 标准之路上又迈进了一步,W3C Web API&nbs
- 来由:最近的工作一直是学校设计教程的开发,都是自己根据理论知识加一些实际工作经验相结合写的教程,所以不会咬文嚼字,文笔也不一定非常专业和流畅
- 用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。但用css有弊端: 1、只支持Fi
- 字符串转十六进制StrToHex Function<% Response.Write StrToHex("Nice
- 下面为大家举一个例子,请按照下面的步骤: (1)从http://home.gbsource.net/xuankong/dll.z
- 我们经常见到很多网站留言系统的显示访客的IP地址都是隐藏了一部分,以达到隐蔽访客真实地理位置的功能。如:111.222.333.*,当然在系
- 注:我指一个网站被第三方网站以iframe的形式调用时,被调用网站的禁止策略 和 调用网站的突破禁止策略,跟XSS麽关系,但跟clickja