问题描述:A页面现在要使用iframe嵌套一个不同域的C页面,A页面iframe的高度取决于C页面的高度,而C页面的高度不是确定的。所以A页面中的iframe要根据C页面的高度自动调整。
解决方案:
使用一个代理页面B来联通A和C这两个不同域的页面。
实现方法:
============================================================================
A.html页面
www.shz.com:8080/cms/iframe/A.html(也可以是jsp页面)中嵌套C页面代码:
<iframe src="http://www.cms.com/C.html" id="iframe-content" name="ssymid" frameBorder=0 scrolling=no width="100%"></iframe>
============================================================================
B.html
www.shz.com:8080/cms/iframe/B.html(也可以是jsp页面)代理页面 注:代理页面要和A页面同域
页面内容:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe代理页面</title></head>
<body>
<script>
function pseth() {
var iObj = parent.parent.document.getElementById(iframe-content);
iObjH = parent.parent.frames["iframe-content"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>
</body>
</html>
=======================================================================
C.html页面
C.html(也可以以jsp页面)
在被嵌入的页面中加上一个display:none的iframe,指向代理页面
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
var hashH = document.documentElement.scrollHeight;
var urlC = "http://www.shz.com:8080/cms/iframe/B.html"; //注:路径一定要是域名,使用IP无效
document.getElementById("iframeC").src=urlC+"#"+hashH;
}
window.onload=sethash;
</script>
=======================================================================
总结:iframe跨域高度自适应的问题,网上都是可以找到的,但是需要注意的就是被嵌入C页面隐藏的iframe的指向地址一定要为域名,不可以使用ip,使用ip是无效的。
但是我们一般都会在自己的电脑上测试,或者在测试机上测试。而自己的电脑和测试机一般都没有域名,我们经常适应Ip来访问。我们可以使用计算机操作系统自带的域名映射来实现,ip到域名的映射,具体方法如下:
1、找到系统的域名重定向文件:如C:\Windows\System32\drivers\etc 路径下的hosts文件
2、打开文件
# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
3、在文件最后加上如下内容:
10.124.8.208 www.cms.shz.com
说明:前面是IP地址 后面是自定义的域名 两者要用空格隔开
通过以上三步,你就可以使用自定义的域名将之前访问地址中ip取代