目录
1. 问题及解决思路 2
2. 实例 2
2.1 父页面的代码 (客户前台页面) 2
2.2 子页面的代码(服务器页面) 3
3. 心得 3
1. 问题及解决思路
IFrame跨域使用时会产生一些问题。比如,scroll bar的高度自适应,cookie和session,JS的跨域使用问题。这些问题的根源在于IFrame使用是跨越了两个域,而浏览器会对跨域访问进行限制。
解决这个问题有很多方法,这里我们的解决方法是统一父页面和子页面的域,这样就不存在跨域,问题就可以得以解决.
2. 实例
IFrame跨域实现必须同时对客户端页面,和服务器页面进行修改,统一二者的域.也就是把客户端的域附值给服务器端页面.
2.1 父页面的代码 (客户前台页面)
<IFrame id="tppFrame" name="tppFrame" align="left" width="100%" height=200 frameborder=0 src=http://www.onlinehealthcentre.co.uk/Default.aspx?domain=”onlinehealthcentre.co.uk”"></iframe>
其中:”? domain= onlinehealth.co.uk” 传递定义domain的参数, 也就是把域传给服务器端.
前台用过脚本设置 域名
<script>
document.domain=" onlinehealth.co.uk ";
</script>
“onlinehealthcentre.co.uk” 即设置为客户前台页面的域.
2.2 子页面的代码(服务器页面)
通过参数传递,子页面上读取父页面的域名
if (Request.QueryString["domain"] != null)
{
Session["domain "] = Request.QueryString["domain"];
}
子页面上写入域名
<script>
Document.domain = “<%=Session.domain%>”;
// 设置父页面的域名,此域名得于子页面
parent.document.all(\"tppFrame\").height=window.document.body.scrollHeight + 40;";
// 此语句设置子页面得高度,解决页面自适应高度问题, 及父页面的高度
// parent.document.all(\"tppFrame\").height 为 子页面 window.document.body.scrollHeight
// 高度加上 40px.
</script>
这样子页面和父页面的域名就统一起来, 父页面高度自适应问题也得以解决.
3. 心得
遇到此类问题一开始可能无从下手,一般的步骤为1。收集资料 2。理清思路,3。写代码。
这个问题在网上没有明确的解决方法。所以思路很重要,找出问题根源就可以解决问题。